@charset "UTF-8";
/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  01. Utils Index
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.1 Colours & design tokens
/*  Any element can switch palette with
/*  data-theme="dark" | "light".
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap");
/*----------------------------------------*/
/*  1.1 Variables
/*----------------------------------------*/
/*----------------------------------------*/
/*  1.2 Breakpoints
/*----------------------------------------*/
/* max-width: this size and below */
/* min-width: large desktops */
/* min-width: this size and up (mobile-first rules). Same steps as the Bootstrap 5 grid,
   except $xl-up, which starts at 1201px so it never overlaps $xl */
/*----------------------------------------*/
/*  1.3 Typography helpers
/*----------------------------------------*/
/* Fluid heading: scales from $min (360px viewport) to $max (1280px viewport). */
/*----------------------------------------*/
/*  1.4 Mixins & colour helpers
/*----------------------------------------*/
/* Translucent versions of the palette tokens (re-theme with data-palette). $a is 0-1. */
/*----------------------------------------*/
/*  02. Theme Index
/*----------------------------------------*/
:root,
[data-theme=light] {
  color-scheme: light;
  /* brand */
  --tc-primary: #d4f772;
  --tc-primary-hover: #c5ec55;
  --tc-on-primary: #13140e;
  --tc-accent: #00dee1;
  --tc-accent-deep: #007b7e;
  --tc-ink: #13140e;
  --tc-ink-hover: #2a2c20;
  --tc-primary-bright: #d4f772; /* primary used as text/icons on dark surfaces */
  --tc-primary-shadow: rgba(168, 214, 40, 0.8);
  --tc-white: #ffffff;
  --tc-black: #000000;
  /* status */
  --tc-success: #167a40;
  --tc-danger: #c2410c;
  --tc-warning: #b45309;
  --tc-star: #f5a623;
  /* semantic */
  --tc-heading: #13140e;
  --tc-text: #565a4d;
  --tc-muted: #6d7165;
  --tc-link: #007b7e;
  --tc-bg: #ffffff;
  --tc-bg-soft: #f5f6f0;
  --tc-surface: #ffffff;
  --tc-surface-2: #f5f6f0;
  --tc-border: #e4e7db;
  --tc-focus: #007b7e;
  --tc-grid-line: rgba(19, 20, 14, 0.05);
  --tc-glow: rgba(212, 247, 114, 0.55);
  --tc-wash-a: 14%;
  --tc-wash-b: 9%;
  --tc-header-bg: rgba(255, 255, 255, 0.86);
  --tc-shadow-sm: 0 2px 8px rgba(19, 20, 14, 0.06);
  --tc-shadow: 0 18px 48px -12px rgba(19, 20, 14, 0.14);
  --tc-shadow-lg: 0 40px 90px -24px rgba(19, 20, 14, 0.24);
  /* shape */
  --tc-radius-sm: 8px;
  --tc-radius: 12px;
  --tc-radius-lg: 20px;
  --tc-radius-xl: 28px;
  --tc-radius-pill: 999px;
  /* type */
  --tc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tc-font-heading: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --tc-font-serif: "Instrument Serif", Georgia, serif;
  /* layout */
  --tc-header-height: 76px;
  --tc-section-space: clamp(72px, 9vw, 120px);
  /* motion */
  --tc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tc-transition: 0.3s var(--tc-ease);
  /* z-index scale */
  --tc-z-base: 1;
  --tc-z-float: 5;
  --tc-z-header: 100;
  --tc-z-overlay: 110;
  --tc-z-offcanvas: 120;
}

[data-theme=dark] {
  --tc-success: #4ade80;
  --tc-danger: #ff8a75;
  --tc-warning: #fbbf24;
  color-scheme: dark;
  --tc-heading: #ffffff;
  --tc-text: rgba(255, 255, 255, 0.68);
  --tc-muted: rgba(255, 255, 255, 0.46);
  --tc-link: var(--tc-primary-bright);
  --tc-bg: #0b0c08;
  --tc-bg-soft: #12130d;
  --tc-surface: #181a12;
  --tc-surface-2: #1f2218;
  --tc-border: rgba(255, 255, 255, 0.1);
  --tc-focus: var(--tc-primary-bright);
  --tc-grid-line: rgba(255, 255, 255, 0.05);
  --tc-glow: rgba(0, 222, 225, 0.22);
  --tc-wash-a: 14%;
  --tc-wash-b: 18%;
  --tc-header-bg: rgba(11, 12, 8, 0.82);
  --tc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --tc-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.6);
  --tc-shadow-lg: 0 40px 90px -24px rgba(0, 0, 0, 0.75);
}

/* Inverse surface: the "ink" blocks (dark button, featured card, CTA) stay visible on dark pages */
:root,
[data-theme=light] {
  --tc-inverse-bg: #13140e;
  --tc-inverse-border: #13140e;
}

[data-theme=dark] {
  --tc-inverse-bg: #1f2218;
  --tc-inverse-border: rgba(255, 255, 255, 0.16);
}

/*----------------------------------------*/
/*  2.2 Palette presets
/*  Default = lime / ink / cyan (see _colors.scss).
/*  Switch the whole template with one attribute:  <html data-palette="indigo">
/*  Presets: indigo | blue | emerald | coral.  Add your own by adding a map below.
/*  Logo artwork per preset: assets/img/logo-<name>.png and logo-light-<name>.png (swapped by tc-main.js).
/*----------------------------------------*/
/* brand tokens: apply to the whole page, light or dark */
[data-palette=indigo] {
  --tc-primary: #4f46e5;
  --tc-primary-hover: #4338ca;
  --tc-on-primary: #ffffff;
  --tc-primary-bright: #a5b4fc;
  --tc-primary-shadow: rgba(79, 70, 229, 0.55);
  --tc-accent: #2dd4bf;
  --tc-accent-deep: #4338ca;
  --tc-ink: #0f1024;
  --tc-ink-hover: #23254a;
}

/* light neutrals */
[data-palette=indigo]:not([data-theme=dark]) {
  --tc-heading: #0f1024;
  --tc-text: #565a78;
  --tc-muted: #6a6e88;
  --tc-link: #4338ca;
  --tc-focus: #4338ca;
  --tc-bg-soft: #f4f5ff;
  --tc-surface-2: #f4f5ff;
  --tc-border: #e3e5f7;
  --tc-glow: rgba(79, 70, 229, 0.28);
  --tc-inverse-bg: #0f1024;
  --tc-inverse-border: #0f1024;
  --tc-shadow-sm: 0 2px 8px rgba(15, 16, 36, 0.06);
  --tc-shadow: 0 18px 48px -12px rgba(15, 16, 36, 0.14);
  --tc-shadow-lg: 0 40px 90px -24px rgba(15, 16, 36, 0.24);
}

/* dark neutrals (whole page or any dark section) */
[data-palette=indigo] [data-theme=dark],
[data-palette=indigo][data-theme=dark] {
  --tc-bg: #0a0b14;
  --tc-bg-soft: #10111d;
  --tc-surface: #161827;
  --tc-surface-2: #1d2033;
  --tc-header-bg: rgba(10, 11, 20, 0.82);
  --tc-glow: rgba(79, 70, 229, 0.35);
  --tc-inverse-bg: #1d2033;
}

/* brand tokens: apply to the whole page, light or dark */
[data-palette=blue] {
  --tc-primary: #2563eb;
  --tc-primary-hover: #1d4ed8;
  --tc-on-primary: #ffffff;
  --tc-primary-bright: #93c5fd;
  --tc-primary-shadow: rgba(37, 99, 235, 0.5);
  --tc-accent: #38bdf8;
  --tc-accent-deep: #1d4ed8;
  --tc-ink: #0b1220;
  --tc-ink-hover: #1c2740;
}

/* light neutrals */
[data-palette=blue]:not([data-theme=dark]) {
  --tc-heading: #0b1220;
  --tc-text: #53607a;
  --tc-muted: #667082;
  --tc-link: #1d4ed8;
  --tc-focus: #1d4ed8;
  --tc-bg-soft: #f3f7fd;
  --tc-surface-2: #f3f7fd;
  --tc-border: #e1e8f5;
  --tc-glow: rgba(37, 99, 235, 0.26);
  --tc-inverse-bg: #0b1220;
  --tc-inverse-border: #0b1220;
  --tc-shadow-sm: 0 2px 8px rgba(11, 18, 32, 0.06);
  --tc-shadow: 0 18px 48px -12px rgba(11, 18, 32, 0.14);
  --tc-shadow-lg: 0 40px 90px -24px rgba(11, 18, 32, 0.24);
}

/* dark neutrals (whole page or any dark section) */
[data-palette=blue] [data-theme=dark],
[data-palette=blue][data-theme=dark] {
  --tc-bg: #070c16;
  --tc-bg-soft: #0c1322;
  --tc-surface: #121b2e;
  --tc-surface-2: #19243a;
  --tc-header-bg: rgba(7, 12, 22, 0.82);
  --tc-glow: rgba(56, 189, 248, 0.28);
  --tc-inverse-bg: #19243a;
}

/* brand tokens: apply to the whole page, light or dark */
[data-palette=emerald] {
  --tc-primary: #10b981;
  --tc-primary-hover: #059669;
  --tc-on-primary: #04231a;
  --tc-primary-bright: #34d399;
  --tc-primary-shadow: rgba(16, 185, 129, 0.5);
  --tc-accent: #fbbf24;
  --tc-accent-deep: #047857;
  --tc-ink: #0b1f17;
  --tc-ink-hover: #1b3a2c;
}

/* light neutrals */
[data-palette=emerald]:not([data-theme=dark]) {
  --tc-heading: #0b1f17;
  --tc-text: #4f5f57;
  --tc-muted: #66736c;
  --tc-link: #047857;
  --tc-focus: #047857;
  --tc-bg-soft: #f2f8f5;
  --tc-surface-2: #f2f8f5;
  --tc-border: #dfeae4;
  --tc-glow: rgba(16, 185, 129, 0.3);
  --tc-inverse-bg: #0b1f17;
  --tc-inverse-border: #0b1f17;
  --tc-shadow-sm: 0 2px 8px rgba(11, 31, 23, 0.06);
  --tc-shadow: 0 18px 48px -12px rgba(11, 31, 23, 0.14);
  --tc-shadow-lg: 0 40px 90px -24px rgba(11, 31, 23, 0.24);
}

/* dark neutrals (whole page or any dark section) */
[data-palette=emerald] [data-theme=dark],
[data-palette=emerald][data-theme=dark] {
  --tc-bg: #070d0a;
  --tc-bg-soft: #0c1511;
  --tc-surface: #121d17;
  --tc-surface-2: #19271f;
  --tc-header-bg: rgba(7, 13, 10, 0.82);
  --tc-glow: rgba(16, 185, 129, 0.28);
  --tc-inverse-bg: #19271f;
}

/* brand tokens: apply to the whole page, light or dark */
[data-palette=coral] {
  --tc-primary: #ff6b4a;
  --tc-primary-hover: #f4553a;
  --tc-on-primary: #1a0f0c;
  --tc-primary-bright: #ff8f75;
  --tc-primary-shadow: rgba(255, 107, 74, 0.5);
  --tc-accent: #fbbf24;
  --tc-accent-deep: #c2410c;
  --tc-ink: #0f172a;
  --tc-ink-hover: #1e293b;
}

/* light neutrals */
[data-palette=coral]:not([data-theme=dark]) {
  --tc-heading: #0f172a;
  --tc-text: #5b5d66;
  --tc-muted: #6e7078;
  --tc-link: #c2410c;
  --tc-focus: #c2410c;
  --tc-bg-soft: #fbf7f4;
  --tc-surface-2: #fbf7f4;
  --tc-border: #efe5df;
  --tc-glow: rgba(255, 107, 74, 0.3);
  --tc-inverse-bg: #0f172a;
  --tc-inverse-border: #0f172a;
  --tc-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --tc-shadow: 0 18px 48px -12px rgba(15, 23, 42, 0.14);
  --tc-shadow-lg: 0 40px 90px -24px rgba(15, 23, 42, 0.24);
}

/* dark neutrals (whole page or any dark section) */
[data-palette=coral] [data-theme=dark],
[data-palette=coral][data-theme=dark] {
  --tc-bg: #080b14;
  --tc-bg-soft: #0e1220;
  --tc-surface: #151a2b;
  --tc-surface-2: #1c2236;
  --tc-header-bg: rgba(8, 11, 20, 0.82);
  --tc-glow: rgba(255, 107, 74, 0.28);
  --tc-inverse-bg: #1c2236;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  2.3 Base
/*----------------------------------------*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--tc-header-height) + 16px);
}

body {
  font-family: var(--tc-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tc-text);
  background: var(--tc-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-locked {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tc-font-heading);
  color: var(--tc-heading);
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

p {
  margin: 0 0 1em;
}

img, svg {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tc-transition);
}

:focus-visible {
  outline: 2px solid var(--tc-focus);
  outline-offset: 3px;
}

.tc-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* generic section wrapper */
.tc-section {
  position: relative;
  padding-block: var(--tc-section-space);
  background: var(--tc-bg);
  color: var(--tc-text);
}
.tc-section--soft {
  background: var(--tc-bg-soft);
}
.tc-section--compact {
  padding-block: clamp(48px, 6vw, 80px);
}
.tc-section--clip {
  overflow: hidden;
}
.tc-section {
  /* Colour wash: two soft glows (primary + accent) that alternate sides from section to section */
}
.tc-section:not(.tc-section--lime):not(.tc-section--ink) {
  isolation: isolate;
  overflow: clip;
}
.tc-section:not(.tc-section--lime):not(.tc-section--ink)::before, .tc-section:not(.tc-section--lime):not(.tc-section--ink)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.tc-section:not(.tc-section--lime):not(.tc-section--ink)::before {
  inset: 0;
  background: radial-gradient(ellipse 55% 60% at 8% 0%, color-mix(in srgb, var(--tc-primary) var(--tc-wash-a, 26%), transparent), transparent 70%), radial-gradient(ellipse 45% 55% at 100% 100%, color-mix(in srgb, var(--tc-accent) var(--tc-wash-b, 16%), transparent), transparent 70%);
}
.tc-section:not(.tc-section--lime):not(.tc-section--ink):nth-of-type(even)::before {
  background: radial-gradient(ellipse 55% 60% at 92% 0%, color-mix(in srgb, var(--tc-accent) var(--tc-wash-b, 16%), transparent), transparent 70%), radial-gradient(ellipse 45% 55% at 0% 100%, color-mix(in srgb, var(--tc-primary) var(--tc-wash-a, 26%), transparent), transparent 70%);
}
.tc-section:not(.tc-section--lime):not(.tc-section--ink) {
  /* every third section also gets the hero's fine grid, faded out from the centre */
}
.tc-section:not(.tc-section--lime):not(.tc-section--ink):nth-of-type(3n)::after {
  inset: 0;
  background-image: linear-gradient(var(--tc-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--tc-grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, var(--tc-black) 20%, transparent 75%);
}

.tc-text-gradient {
  background: linear-gradient(100deg, var(--tc-heading) 20%, var(--tc-accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme=dark] .tc-text-gradient {
  background-image: linear-gradient(100deg, var(--tc-white) 10%, var(--tc-primary) 60%, var(--tc-accent));
}

.tc-text-serif {
  font-family: var(--tc-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* GSAP (tc-scroll-animation.js) owns the reveal; while a tween runs, CSS transitions must not fight it */
.tc-is-animating {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/*----------------------------------------*/
/*  03. Components Index
/*----------------------------------------*/
/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.1 Buttons
/*  .tc-btn  --primary --dark --light --outline --ghost --sm --lg --block
/*----------------------------------------*/
.tc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1.5px solid transparent;
  border-radius: var(--tc-radius-pill);
  font-family: var(--tc-font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--tc-transition), background var(--tc-transition), color var(--tc-transition), border-color var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-btn:hover {
  transform: translateY(-2px);
}
.tc-btn:active {
  transform: translateY(0);
}
.tc-btn:disabled, .tc-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.tc-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: -10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tc-on-primary) 12%, transparent);
  font-size: 11px;
  transition: transform var(--tc-transition);
}
.tc-btn:hover .tc-btn__icon {
  transform: translateX(3px);
}
.tc-btn--primary {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  box-shadow: 0 10px 28px -10px var(--tc-primary-shadow);
}
.tc-btn--primary:hover {
  background: var(--tc-primary-hover);
  color: var(--tc-on-primary);
}
.tc-btn--dark {
  background: var(--tc-inverse-bg);
  border-color: var(--tc-inverse-border);
  color: var(--tc-white);
}
.tc-btn--dark:hover {
  background: var(--tc-ink-hover);
  color: var(--tc-white);
}
.tc-btn--dark .tc-btn__icon {
  background: var(--tc-primary);
  color: var(--tc-ink);
}
.tc-btn--light {
  background: var(--tc-white);
  color: var(--tc-ink);
}
.tc-btn--light:hover {
  background: var(--tc-primary);
  color: var(--tc-ink);
}
.tc-btn--outline {
  background: transparent;
  color: var(--tc-heading);
  border-color: var(--tc-border);
}
.tc-btn--outline:hover {
  border-color: var(--tc-heading);
  color: var(--tc-heading);
}
.tc-btn--ghost {
  background: transparent;
  color: var(--tc-heading);
  padding-inline: 16px;
}
.tc-btn--ghost:hover {
  color: var(--tc-link);
  transform: none;
}
.tc-btn--sm {
  padding: 10px 20px;
  font-size: 14px;
}
.tc-btn--lg {
  padding: 18px 36px;
  font-size: 16px;
}
.tc-btn--block {
  display: flex;
  width: 100%;
}
.tc-btn {
  /* chunky: bold ink outline + hard offset shadow (product-led / startup looks) */
}
.tc-btn--chunky {
  padding: 17px 32px;
  border: 2px solid var(--tc-ink);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--tc-ink);
}
.tc-btn--chunky:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--tc-ink);
}
.tc-btn--chunky:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--tc-ink);
}
.tc-btn--chunky.tc-btn--light {
  background: var(--tc-white);
  color: var(--tc-ink);
}
.tc-btn--chunky.tc-btn--light:hover {
  background: var(--tc-white);
}
.tc-btn--chunky.tc-btn--dark {
  border-color: var(--tc-ink);
  box-shadow: 4px 4px 0 var(--tc-primary);
}
.tc-btn--chunky.tc-btn--dark:hover {
  box-shadow: 2px 2px 0 var(--tc-primary);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.2 Section heading
/*----------------------------------------*/
.tc-section-head {
  max-width: 680px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.tc-section-head__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 14px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  font-family: var(--tc-font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-section-head__tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tc-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-primary) 35%, transparent);
}
.tc-section-head__title {
  font-family: var(--tc-font-heading);
  font-size: clamp(32px, 25.7391304348px + 1.7391304348vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--tc-heading);
  margin-bottom: 16px;
  text-wrap: balance;
}
.tc-section-head__text {
  font-size: 17px;
  margin: 0;
}
.tc-section-head--center {
  margin-inline: auto;
  text-align: center;
}
.tc-section-head--wide {
  max-width: 860px;
}
.tc-section-head--split {
  max-width: none;
  display: grid;
  gap: 20px 64px;
  align-items: end;
}
@media only screen and (min-width: 992px) {
  .tc-section-head--split {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/*----------------------------------------*/
/*  3.3 Badge
/*----------------------------------------*/
.tc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface-2);
  color: var(--tc-heading);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.tc-badge--primary {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-badge--outline {
  background: transparent;
  border: 1px solid var(--tc-border);
}
.tc-badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tc-accent);
}

/*----------------------------------------*/
/*  3.4 Avatar & avatar group
/*----------------------------------------*/
.tc-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 2px solid var(--tc-surface);
}
.tc-avatar--sm {
  width: 32px;
  height: 32px;
}
.tc-avatar--lg {
  width: 64px;
  height: 64px;
}

.tc-avatar-group {
  display: inline-flex;
  align-items: center;
}
.tc-avatar-group .tc-avatar + .tc-avatar {
  margin-left: -12px;
}
.tc-avatar-group__label {
  margin-left: 14px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--tc-text);
}
.tc-avatar-group__label strong {
  display: block;
  color: var(--tc-heading);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.5 Feature card
/*  --horizontal --center --dark --highlight --flat
/*----------------------------------------*/
.tc-feature-card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  transition: transform var(--tc-transition), box-shadow var(--tc-transition), border-color var(--tc-transition);
}
.tc-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tc-shadow);
  border-color: transparent;
}
.tc-feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  border-radius: var(--tc-radius);
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 22px;
}
.tc-feature-card__icon--accent {
  background: var(--tc-accent);
}
.tc-feature-card__icon--dark {
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
}
.tc-feature-card__icon--soft {
  background: var(--tc-surface-2);
  color: var(--tc-heading);
}
.tc-feature-card__title {
  font-size: 20px;
  margin-bottom: 10px;
}
.tc-feature-card__text {
  margin-bottom: 0;
}
.tc-feature-card__link {
  margin-top: auto;
  padding-top: 20px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-feature-card__link i {
  margin-left: 6px;
  transition: transform var(--tc-transition);
}
.tc-feature-card__link:hover {
  color: var(--tc-link);
}
.tc-feature-card__link:hover i {
  transform: translateX(4px);
}
.tc-feature-card__media {
  margin: auto -32px -32px;
  padding-top: 24px;
  overflow: hidden;
  border-radius: 0 0 var(--tc-radius-lg) var(--tc-radius-lg);
}
.tc-feature-card--horizontal {
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}
.tc-feature-card--horizontal .tc-feature-card__icon {
  margin-bottom: 0;
}
.tc-feature-card--center {
  align-items: center;
  text-align: center;
}
.tc-feature-card--flat {
  border-color: transparent;
  background: var(--tc-surface-2);
}
.tc-feature-card--flat:hover {
  box-shadow: none;
  background: var(--tc-surface);
  border-color: var(--tc-border);
}
.tc-feature-card--dark {
  background: var(--tc-inverse-bg);
  border-color: var(--tc-inverse-border);
  color: rgba(255, 255, 255, 0.7);
}
.tc-feature-card--dark .tc-feature-card__title {
  color: var(--tc-white);
}
.tc-feature-card--dark .tc-feature-card__link {
  color: var(--tc-primary-bright);
}
.tc-feature-card--highlight {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
  color: color-mix(in srgb, var(--tc-on-primary) 75%, transparent);
}
.tc-feature-card--highlight .tc-feature-card__title, .tc-feature-card--highlight .tc-feature-card__link {
  color: var(--tc-on-primary);
}
.tc-feature-card--highlight .tc-feature-card__icon {
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.6 Statistic
/*----------------------------------------*/
.tc-stat__value {
  font-family: var(--tc-font-heading);
  font-size: clamp(36px, 28.1739130435px + 2.1739130435vw, 56px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--tc-heading);
  display: block;
  margin-bottom: 8px;
}
.tc-stat__label {
  margin: 0;
  font-size: 15px;
}
.tc-stat--card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 28px;
}
.tc-stat--card .tc-stat__value {
  font-size: clamp(32px, 4vw, 44px);
}
.tc-stat--accent .tc-stat__value {
  color: var(--tc-link);
}
.tc-stat--mono .tc-stat__value {
  font-family: var(--tc-font-mono);
  font-weight: 500;
  letter-spacing: -0.05em;
}
.tc-stat--large .tc-stat__value {
  font-size: clamp(56px, 8vw, 104px);
  letter-spacing: -0.04em;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.7 Testimonial card
/*  --featured --minimal
/*----------------------------------------*/
.tc-testimonial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}
.tc-testimonial-card__rating {
  margin-bottom: 18px;
  color: var(--tc-star);
  font-size: 14px;
  letter-spacing: 2px;
}
.tc-testimonial-card__quote {
  flex-grow: 1;
  margin-bottom: 28px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tc-heading);
}
.tc-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tc-testimonial-card__name {
  margin: 0;
  font-size: 16px;
}
.tc-testimonial-card__role {
  display: block;
  font-size: 14px;
  color: var(--tc-muted);
}
.tc-testimonial-card--featured {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
}
.tc-testimonial-card--featured .tc-testimonial-card__quote {
  color: var(--tc-on-primary);
  font-size: 20px;
}
.tc-testimonial-card--featured .tc-testimonial-card__name {
  color: var(--tc-on-primary);
}
.tc-testimonial-card--featured .tc-testimonial-card__role {
  color: color-mix(in srgb, var(--tc-on-primary) 82%, transparent);
}
.tc-testimonial-card--featured .tc-testimonial-card__rating {
  color: var(--tc-on-primary);
}
.tc-testimonial-card--minimal {
  padding: 0;
  border: 0;
  background: transparent;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.8 Pricing
/*  .tc-pricing (toggle + grid)  .tc-pricing-card --featured
/*----------------------------------------*/
.tc-pricing__toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 48px;
  font-family: var(--tc-font-heading);
  font-weight: 600;
  color: var(--tc-muted);
}
.tc-pricing__toggle-label.is-active {
  color: var(--tc-heading);
}
.tc-pricing__switch {
  position: relative;
  width: 56px;
  height: 30px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface-2);
  cursor: pointer;
}
.tc-pricing__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tc-ink);
  transition: transform var(--tc-transition);
}
.tc-pricing__switch.is-checked::after {
  transform: translateX(26px);
  background: var(--tc-accent-deep);
}
.tc-pricing__save {
  margin-left: 4px;
}
.tc-pricing__grid {
  align-items: stretch;
}

.tc-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 36px 32px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
}
.tc-pricing-card__header {
  margin-bottom: 24px;
}
.tc-pricing-card__name {
  font-size: 20px;
  margin-bottom: 6px;
}
.tc-pricing-card__desc {
  margin: 0;
  font-size: 15px;
}
.tc-pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-pricing-card__amount {
  font-family: var(--tc-font-heading);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tc-heading);
}
.tc-pricing-card__period {
  font-size: 15px;
  color: var(--tc-muted);
}
.tc-pricing-card__features {
  flex-grow: 1;
  margin-bottom: 32px;
}
.tc-pricing-card__feature {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 15px;
}
.tc-pricing-card__feature i {
  margin-top: 5px;
  font-size: 12px;
  color: var(--tc-accent-deep);
}
.tc-pricing-card__badge {
  position: absolute;
  top: 20px;
  right: 20px;
}
.tc-pricing-card--featured {
  background: var(--tc-inverse-bg);
  border-color: var(--tc-inverse-border);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: var(--tc-shadow-lg);
}
.tc-pricing-card--featured .tc-pricing-card__name, .tc-pricing-card--featured .tc-pricing-card__amount {
  color: var(--tc-white);
}
.tc-pricing-card--featured .tc-pricing-card__price {
  border-color: rgba(255, 255, 255, 0.14);
}
.tc-pricing-card--featured .tc-pricing-card__feature i {
  color: var(--tc-primary-bright);
}
.tc-pricing-card--featured .tc-pricing-card__period {
  color: rgba(255, 255, 255, 0.5);
}
@media only screen and (min-width: 992px) {
  .tc-pricing-card--featured {
    transform: translateY(-16px);
  }
}

/* additive modifier: lime outline + glow so the featured card stands out on dark pages */
.tc-pricing-card--glow {
  border-color: var(--tc-primary);
  box-shadow: 0 0 0 1px var(--tc-primary), 0 30px 90px -30px var(--tc-glow);
}

[data-theme=dark] .tc-pricing-card__feature i {
  color: var(--tc-accent);
}

/*----------------------------------------*/
/*  3.9 FAQ accordion (behaviour: tc-main.js)
/*----------------------------------------*/
.tc-faq__item {
  border-bottom: 1px solid var(--tc-border);
}
.tc-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: transparent;
  font-family: var(--tc-font-heading);
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  color: var(--tc-heading);
  cursor: pointer;
}
.tc-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tc-surface-2);
  transition: background var(--tc-transition), transform var(--tc-transition);
}
.tc-faq__icon::before, .tc-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  background: var(--tc-heading);
  transition: transform var(--tc-transition);
}
.tc-faq__icon::after {
  transform: rotate(90deg);
}
.tc-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--tc-ease);
}
.tc-faq__answer-inner {
  overflow: hidden;
}
.tc-faq__answer-inner p {
  padding-bottom: 24px;
  margin: 0;
  max-width: 680px;
}
.tc-faq__item.is-open .tc-faq__answer {
  grid-template-rows: 1fr;
}
.tc-faq__item.is-open .tc-faq__icon {
  background: var(--tc-primary);
}
.tc-faq__item.is-open .tc-faq__icon::before, .tc-faq__item.is-open .tc-faq__icon::after {
  background: var(--tc-on-primary);
}
.tc-faq__item.is-open .tc-faq__icon::after {
  transform: rotate(0);
}
.tc-faq--boxed .tc-faq__item {
  margin-bottom: 14px;
  padding-inline: 28px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.10 Blog card  --horizontal --featured
/*----------------------------------------*/
.tc-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  transition: transform var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tc-shadow);
}
.tc-blog-card:hover .tc-blog-card__img {
  transform: scale(1.05);
}
.tc-blog-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.tc-blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--tc-ease);
}
.tc-blog-card__category {
  position: absolute;
  top: 16px;
  left: 16px;
}
.tc-blog-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 28px;
}
.tc-blog-card__meta {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-blog-card__meta span + span::before {
  content: "·";
  margin: 0 8px;
}
.tc-blog-card__title {
  font-size: 20px;
  margin-bottom: 12px;
}
.tc-blog-card__title a:hover {
  color: var(--tc-link);
}
.tc-blog-card__excerpt {
  font-size: 15px;
}
.tc-blog-card__link {
  margin-top: auto;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-blog-card__link i {
  margin-left: 6px;
}
.tc-blog-card__link:hover {
  color: var(--tc-link);
}
.tc-blog-card--horizontal {
  flex-direction: row;
}
.tc-blog-card--horizontal .tc-blog-card__media {
  flex: 0 0 38%;
  aspect-ratio: auto;
}
@media only screen and (max-width: 575px) {
  .tc-blog-card--horizontal {
    flex-direction: column;
  }
  .tc-blog-card--horizontal .tc-blog-card__media {
    aspect-ratio: 16/10;
  }
}
.tc-blog-card--featured .tc-blog-card__title {
  font-size: 28px;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.11 Logo list / marquee ("Trusted by")
/*----------------------------------------*/
.tc-logo-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 56px;
}
.tc-logo-list__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tc-font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tc-muted);
  opacity: 0.85;
  transition: color var(--tc-transition), opacity var(--tc-transition);
}
.tc-logo-list__item:hover {
  color: var(--tc-heading);
  opacity: 1;
}
.tc-logo-list__item i {
  font-size: 20px;
}
.tc-logo-list {
  /* brand logo image: ink artwork on a transparent background, inverted on dark sections */
}
.tc-logo-list__img {
  display: block;
  width: auto;
  height: var(--tc-logo-height, 34px);
  opacity: 0.65;
  transition: opacity var(--tc-transition);
}
[data-theme=dark] .tc-logo-list__img {
  filter: invert(1);
}
.tc-logo-list__item:hover .tc-logo-list__img {
  opacity: 1;
}
.tc-logo-list--marquee {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  gap: 0;
  animation: tc-marquee 36s linear infinite;
}
.tc-logo-list--marquee .tc-logo-list__item {
  padding-inline: 28px;
  white-space: nowrap;
}
.tc-logo-list__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, var(--tc-black) 12%, var(--tc-black) 88%, transparent);
}
.tc-logo-list__viewport:hover .tc-logo-list--marquee {
  animation-play-state: paused;
}

@keyframes tc-marquee {
  to {
    transform: translateX(-50%);
  }
}

.tc-logo-list--marquee.is-js {
  animation: none;
  will-change: transform;
}
.tc-logo-list__viewport:has(> .is-js) {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.tc-logo-list__viewport:has(> .is-dragging) {
  cursor: grabbing;
}
@media (prefers-reduced-motion: reduce) {
  .tc-logo-list--marquee {
    animation: none;
  }
}
/*----------------------------------------*/
/*  3.12 Integration card / tile
/*----------------------------------------*/
.tc-integration {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  transition: transform var(--tc-transition), box-shadow var(--tc-transition), border-color var(--tc-transition);
}
.tc-integration:hover {
  transform: translateY(-4px);
  box-shadow: var(--tc-shadow);
}
.tc-integration__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--tc-radius);
  background: var(--tc-surface-2);
  color: var(--tc-heading);
  font-size: 22px;
}
.tc-integration__name {
  margin: 0;
  font-size: 16px;
}
.tc-integration__text {
  display: block;
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-integration--tile {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 28px 16px;
  aspect-ratio: 1;
}
.tc-integration--tile .tc-integration__text {
  display: none;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.13 Process steps  --vertical --connected
/*----------------------------------------*/
.tc-step {
  position: relative;
  height: 100%;
}
.tc-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
  font-family: var(--tc-font-heading);
  font-weight: 700;
}
.tc-step__title {
  font-size: 20px;
  margin-bottom: 10px;
}
.tc-step__text {
  margin: 0;
}
.tc-step__media {
  margin-top: 24px;
}
.tc-step--vertical {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0 24px;
  padding-bottom: 40px;
}
.tc-step--vertical .tc-step__number {
  margin: 0;
  grid-row: span 2;
}
.tc-step--vertical:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 56px;
  bottom: 8px;
  width: 2px;
  background: var(--tc-border);
}
@media only screen and (min-width: 992px) {
  .tc-step--connected:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 24px;
    left: 72px;
    right: -16px;
    border-top: 2px dashed var(--tc-border);
  }
}

/*----------------------------------------*/
/*  3.14 Tabs (behaviour: tc-main.js)
/*----------------------------------------*/
.tc-tabs__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
}
.tc-tabs__tab {
  padding: 10px 22px;
  border: 0;
  border-radius: var(--tc-radius-pill);
  background: transparent;
  font-family: var(--tc-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-text);
  cursor: pointer;
  transition: background var(--tc-transition), color var(--tc-transition);
}
.tc-tabs__tab:hover {
  color: var(--tc-heading);
}
.tc-tabs__tab.is-active {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-tabs__panel {
  display: none;
}
.tc-tabs__panel.is-active {
  display: block;
  animation: tc-tab-in 0.5s var(--tc-ease);
}

@keyframes tc-tab-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.15 Slider (Swiper skin)
/*----------------------------------------*/
.tc-slider .swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.tc-slider .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 !important;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-border);
  opacity: 1;
  transition: width var(--tc-transition), background var(--tc-transition);
}
.tc-slider .swiper-pagination-bullet-active {
  width: 28px;
  background: var(--tc-ink);
}
[data-theme=dark] .tc-slider .swiper-pagination-bullet-active {
  background: var(--tc-primary);
}

/* Centre mode: the middle card is full size, its neighbours are smaller and softer.
   Hover changes the background colour only, so nothing jumps under the pointer. */
.tc-slider--center .swiper-slide {
  transition: transform var(--tc-transition-slow, 0.5s) ease, opacity var(--tc-transition-slow, 0.5s) ease;
}
.tc-slider--center .tc-testimonial-card {
  transition: background-color var(--tc-transition), border-color var(--tc-transition);
}
.tc-slider--center .tc-testimonial-card__quote, .tc-slider--center .tc-testimonial-card__name, .tc-slider--center .tc-testimonial-card__role, .tc-slider--center .tc-testimonial-card__rating {
  transition: color var(--tc-transition);
}
.tc-slider--center .tc-testimonial-card:hover {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
}
.tc-slider--center .tc-testimonial-card:hover .tc-testimonial-card__quote, .tc-slider--center .tc-testimonial-card:hover .tc-testimonial-card__name, .tc-slider--center .tc-testimonial-card:hover .tc-testimonial-card__rating {
  color: var(--tc-on-primary);
}
.tc-slider--center .tc-testimonial-card:hover .tc-testimonial-card__role {
  color: color-mix(in srgb, var(--tc-on-primary) 82%, transparent);
}
@media only screen and (min-width: 1201px) {
  .tc-slider--center .swiper-slide {
    opacity: 0.55;
    transform: scale(0.9);
  }
  .tc-slider--center .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
  }
  .tc-slider--center .swiper-slide-active .tc-testimonial-card {
    border-color: var(--tc-ink);
    box-shadow: var(--tc-shadow);
  }
  .tc-slider--center .swiper-slide-active .tc-testimonial-card__quote {
    font-size: 19px;
  }
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.16 Call to action  --dark --lime --split
/*----------------------------------------*/
.tc-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 80px);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-primary);
  color: color-mix(in srgb, var(--tc-on-primary) 78%, transparent);
  text-align: center;
}
.tc-cta__title {
  font-family: var(--tc-font-heading);
  font-size: clamp(30px, 21.3913043478px + 2.3913043478vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--tc-heading);
  color: var(--tc-on-primary);
  max-width: 760px;
  margin: 0 auto 16px;
}
.tc-cta__text {
  max-width: 560px;
  margin: 0 auto 32px;
  font-size: 18px;
}
.tc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.tc-cta__content {
  position: relative;
  z-index: var(--tc-z-base);
}
.tc-cta {
  /* outline / ghost buttons follow the CTA surface, not the page theme */
}
.tc-cta .tc-btn--outline, .tc-cta .tc-btn--ghost {
  color: var(--tc-on-primary);
  border-color: color-mix(in srgb, var(--tc-on-primary) 40%, transparent);
}
.tc-cta .tc-btn--outline:hover, .tc-cta .tc-btn--ghost:hover {
  color: var(--tc-on-primary);
  border-color: var(--tc-on-primary);
}
.tc-cta--dark .tc-btn--outline, .tc-cta--dark .tc-btn--ghost {
  color: var(--tc-white);
  border-color: rgba(255, 255, 255, 0.35);
}
.tc-cta--dark .tc-btn--outline:hover, .tc-cta--dark .tc-btn--ghost:hover {
  color: var(--tc-white);
  border-color: var(--tc-white);
}
.tc-cta--dark {
  background: var(--tc-inverse-bg);
  border: 1px solid var(--tc-inverse-border);
  color: rgba(255, 255, 255, 0.7);
}
.tc-cta--dark .tc-cta__title {
  color: var(--tc-white);
}
.tc-cta--dark::before {
  content: "";
  position: absolute;
  inset: auto -10% -60% -10%;
  height: 90%;
  background: radial-gradient(closest-side, var(--tc-glow), transparent);
}
.tc-cta--split {
  text-align: left;
  display: grid;
  gap: 32px;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .tc-cta--split {
    grid-template-columns: 1.3fr 1fr;
  }
}
.tc-cta--split .tc-cta__title, .tc-cta--split .tc-cta__text {
  margin-inline: 0;
}
.tc-cta--split .tc-cta__actions {
  justify-content: flex-start;
}
@media only screen and (min-width: 992px) {
  .tc-cta--split .tc-cta__actions {
    justify-content: flex-end;
  }
}

/* Decorative shapes + photo layers: real child elements whose image comes from data-bg-img (tc-main.js),
   PNG / JPG in assets/img/shape and assets/img/cta */
.tc-cta__shape, .tc-cta__bg {
  position: absolute;
  pointer-events: none;
  background: no-repeat center/contain;
}

.tc-cta__shape--ring {
  top: -150px;
  right: -150px;
  width: 440px;
  height: 440px;
}
@media only screen and (max-width: 767px) {
  .tc-cta__shape--ring {
    top: -120px;
    right: -120px;
    width: 300px;
    height: 300px;
  }
}

.tc-cta__shape--dots {
  left: 28px;
  bottom: 28px;
  width: 130px;
  height: 130px;
}
@media only screen and (max-width: 767px) {
  .tc-cta__shape--dots {
    left: 16px;
    bottom: 16px;
    width: 90px;
    height: 90px;
  }
}

.tc-cta__shape--cross {
  left: 7%;
  top: 36px;
  width: 34px;
  height: 34px;
}
@media only screen and (max-width: 767px) {
  .tc-cta__shape--cross {
    left: 18px;
    top: 20px;
    width: 26px;
    height: 26px;
  }
}

.tc-cta__bg {
  inset: 0;
  background-size: cover;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, var(--tc-black) 95%);
  mask-image: linear-gradient(90deg, transparent 8%, var(--tc-black) 95%);
}
.tc-cta__bg--circuit {
  opacity: 0.34;
}
.tc-cta__bg--desk {
  opacity: 0.22;
  filter: grayscale(1) contrast(1.1);
}

/* AI split CTA: dark card with lime + cyan glows and the hero grid; copy and perks on the left, the product chat peeking up from the bottom edge on the right */
.tc-cta--ai {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding-bottom: clamp(40px, 6vw, 80px);
  text-align: left;
  isolation: isolate;
  border: 1px solid var(--tc-inverse-border);
  color: rgba(255, 255, 255, 0.72);
  background: radial-gradient(ellipse 55% 70% at 0% 0%, color-mix(in srgb, var(--tc-primary) 26%, transparent), transparent 70%), radial-gradient(ellipse 55% 75% at 100% 100%, color-mix(in srgb, var(--tc-accent) 30%, transparent), transparent 70%), var(--tc-inverse-bg);
}
@media only screen and (min-width: 992px) {
  .tc-cta--ai {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    padding-bottom: 0;
  }
}
.tc-cta--ai::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, var(--tc-black) 20%, transparent 80%);
  pointer-events: none;
}
.tc-cta--ai .tc-cta__title, .tc-cta--ai .tc-cta__text {
  margin-inline: 0;
}
.tc-cta--ai .tc-cta__title {
  max-width: 560px;
  color: var(--tc-white);
}
.tc-cta--ai .tc-cta__title .tc-text-serif {
  color: var(--tc-primary);
}
.tc-cta--ai .tc-cta__text {
  max-width: 480px;
  margin-bottom: 28px;
}
.tc-cta--ai .tc-cta__actions {
  justify-content: flex-start;
}
@media only screen and (min-width: 992px) {
  .tc-cta--ai .tc-cta__content {
    padding-block: 56px;
  }
}
.tc-cta--ai .tc-btn--outline {
  color: var(--tc-white);
  border-color: rgba(255, 255, 255, 0.35);
}
.tc-cta--ai .tc-btn--outline:hover {
  color: var(--tc-white);
  border-color: var(--tc-white);
}
.tc-cta--ai .tc-cta__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--tc-radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--tc-white);
  font-size: 13.5px;
  font-weight: 600;
}
.tc-cta--ai .tc-cta__tag i {
  color: var(--tc-primary);
}
.tc-cta--ai .tc-cta__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}
.tc-cta--ai .tc-cta__perks i {
  margin-right: 6px;
  font-size: 12px;
  color: var(--tc-primary);
}
.tc-cta--ai .tc-cta__visual {
  position: relative;
  min-width: 0;
  display: none;
  align-self: end;
}
@media only screen and (min-width: 992px) {
  .tc-cta--ai .tc-cta__visual {
    display: block;
  }
}
.tc-cta--ai .tc-cta__shot {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--tc-radius-lg) var(--tc-radius-lg) 0 0;
}
.tc-cta--ai .tc-cta__chip {
  position: absolute;
  right: -5%;
  top: 12%;
  display: block;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.17 Window frame (wrapper for product mockups)
/*----------------------------------------*/
.tc-window {
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-lg);
}
.tc-window__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--tc-border);
  background: var(--tc-surface-2);
}
.tc-window__dots {
  display: flex;
  gap: 6px;
}
.tc-window__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tc-border);
}
.tc-window__dots span:nth-child(1) {
  background: #ff6058;
}
.tc-window__dots span:nth-child(2) {
  background: #ffc130;
}
.tc-window__dots span:nth-child(3) {
  background: #27ca40;
}
.tc-window__url {
  flex: 1;
  max-width: 320px;
  margin-inline: auto;
  padding: 4px 14px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  font-size: 12px;
  text-align: center;
  color: var(--tc-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-window__body {
  position: relative;
}
.tc-window {
  /* exported screenshot of a window mockup: keeps the frame styling, scales with its container */
}
.tc-window--shot {
  display: block;
  width: 100%;
  height: auto;
}
.tc-window--borderless {
  border: 0;
}
@media only screen and (min-width: 992px) {
  .tc-window--tilt {
    transform: perspective(1800px) rotateX(6deg);
    transform-origin: top center;
  }
}

/* One dashboard card as an image (PNG with 12px of transparent padding); three sit side by side and stack on small screens */
.tc-panel-shot {
  display: block;
  width: calc(100% + 24px);
  max-width: none;
  height: auto;
  margin: -12px;
}

/* Desktop and mobile renders of the same screen: the mobile one is laid out at 390px so its text stays readable */
img.tc-shot--mobile {
  display: none;
}

@media only screen and (max-width: 767px) {
  img.tc-shot--desktop {
    display: none;
  }
  img.tc-shot--mobile {
    display: block;
  }
}
/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.18 Dashboard mockup
/*  .tc-dashboard  .tc-panel  .tc-kpi  .tc-list  .tc-table
/*----------------------------------------*/
.tc-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  font-size: 13px;
  line-height: 1.45;
  color: var(--tc-text);
  background: var(--tc-bg-soft);
  text-align: left;
}
.tc-dashboard__main {
  min-width: 0;
  padding: 20px;
}
.tc-dashboard__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.tc-dashboard__title {
  margin: 0;
  font-size: 18px;
}
.tc-dashboard__grid {
  display: grid;
  gap: 14px;
}
.tc-dashboard--no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}
.tc-dashboard--compact .tc-dashboard__main {
  padding: 14px;
}

.tc-panel, .tc-kpi {
  padding: 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
}
.tc-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.tc-panel__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.tc-panel__meta {
  font-size: 12px;
  color: var(--tc-muted);
}

.tc-kpi__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--tc-muted);
}
.tc-kpi__value {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tc-heading);
}
.tc-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-success);
}
.tc-kpi__delta--down {
  color: var(--tc-danger);
}

.tc-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--tc-border);
}
.tc-list__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.tc-list__main {
  flex: 1;
  min-width: 0;
}
.tc-list__main strong {
  display: block;
  font-weight: 600;
  color: var(--tc-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-list__main span {
  font-size: 12px;
  color: var(--tc-muted);
}
.tc-list__value {
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tc-surface-2);
  color: var(--tc-heading);
  font-size: 12px;
}

.tc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tc-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tc-muted);
  border-bottom: 1px solid var(--tc-border);
}
.tc-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--tc-border);
  color: var(--tc-text);
}
.tc-table td:first-child {
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-table tr:last-child td {
  border-bottom: 0;
}
.tc-table__status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--tc-radius-pill);
  background: rgba(26, 143, 76, 0.12);
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-success);
}
.tc-table__status--warn {
  background: rgba(245, 166, 35, 0.16);
  color: #b86e00;
}
.tc-table__status--off {
  background: var(--tc-surface-2);
  color: var(--tc-muted);
}
.tc-table-wrap {
  overflow-x: auto;
}

/* grid children may shrink (prevents mockups from forcing horizontal scroll) */
.tc-dashboard__grid > * {
  min-width: 0;
}

.tc-panel, .tc-kpi {
  min-width: 0;
}

/*----------------------------------------*/
/*  3.19 Charts (pure CSS / inline SVG)
/*  Data-driven values come through the --tc-value custom property.
/*----------------------------------------*/
.tc-chart {
  position: relative;
}
.tc-chart--bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
}
.tc-chart__bar {
  flex: 1;
  height: var(--tc-value, 50%);
  min-height: 6px;
  border-radius: 6px 6px 2px 2px;
  background: var(--tc-surface-2);
  transform-origin: bottom;
  transition: transform var(--tc-transition);
}
.tc-chart__bar--primary {
  background: var(--tc-primary);
}
.tc-chart__bar--dark {
  background: var(--tc-ink);
}
.tc-chart__bar--accent {
  background: var(--tc-accent);
}
.tc-chart__bar:hover {
  transform: scaleY(1.04);
}
.tc-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.tc-chart__grid {
  stroke: var(--tc-border);
  stroke-dasharray: 3 4;
}
[data-theme=dark] .tc-chart__line:not(.tc-chart__line--accent) {
  stroke: var(--tc-primary);
}
.tc-chart__line {
  fill: none;
  stroke: var(--tc-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tc-chart__line--accent {
  stroke: var(--tc-accent);
}
.tc-chart__line--muted {
  stroke: var(--tc-muted);
  stroke-dasharray: 4 5;
  stroke-width: 1.5;
}
.tc-chart__area {
  fill: var(--tc-primary);
  opacity: 0.35;
}
.tc-chart__dot {
  fill: var(--tc-surface);
  stroke: var(--tc-ink);
  stroke-width: 2.5;
}
.tc-chart__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--tc-muted);
}

.tc-donut {
  --tc-value: 60;
  position: relative;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--tc-primary) calc(var(--tc-value) * 1%), var(--tc-surface-2) 0);
}
.tc-donut::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--tc-surface);
}
.tc-donut__label {
  position: relative;
  font-family: var(--tc-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--tc-heading);
}

.tc-progress {
  height: 8px;
  overflow: hidden;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface-2);
}
.tc-progress__bar {
  display: block;
  width: var(--tc-value, 50%);
  height: 100%;
  border-radius: inherit;
  background: var(--tc-primary);
}
.tc-progress__bar--dark {
  background: var(--tc-ink);
}
.tc-progress__bar--accent {
  background: var(--tc-accent);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.20 AI chat / assistant mockup (image)
/*----------------------------------------*/
/* PNG mockup with 32px of transparent padding for the shadow */
.tc-chat-shot {
  display: block;
  width: calc(100% + 64px);
  max-width: none;
  height: auto;
  margin: -32px;
}
@media only screen and (max-width: 767px) {
  .tc-chat-shot {
    width: calc(100% + 32px);
    margin: -16px;
  }
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.21 Workflow / automation diagram
/*  .tc-workflow > .tc-workflow__lane > .tc-node + .tc-workflow__connector
/*----------------------------------------*/
.tc-workflow {
  position: relative;
  padding: clamp(20px, 4vw, 44px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background-color: var(--tc-surface);
  background-image: radial-gradient(var(--tc-border) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
.tc-workflow__lane {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
@media only screen and (min-width: 992px) {
  .tc-workflow__lane {
    flex-direction: row;
    align-items: center;
  }
}
.tc-workflow__lane + .tc-workflow__lane {
  margin-top: 24px;
}
.tc-workflow__branch {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tc-workflow__connector {
  position: relative;
  flex-shrink: 0;
  width: 2px;
  height: 36px;
  margin-inline: auto;
  background: repeating-linear-gradient(var(--tc-muted) 0 4px, transparent 4px 8px);
}
@media only screen and (min-width: 992px) {
  .tc-workflow__connector {
    width: 56px;
    height: 2px;
    margin: 0;
    background: repeating-linear-gradient(90deg, var(--tc-muted) 0 4px, transparent 4px 8px);
  }
}
.tc-workflow__connector::after {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tc-accent);
  animation: tc-flow-y 2.4s infinite linear;
}
@media only screen and (min-width: 992px) {
  .tc-workflow__connector::after {
    top: -3px;
    left: 0;
    animation-name: tc-flow-x;
  }
}

.tc-node {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-sm);
  transition: transform var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-node:hover {
  transform: translateY(-3px);
  box-shadow: var(--tc-shadow);
}
.tc-node__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 17px;
}
.tc-node__title {
  margin: 0;
  font-size: 14px;
}
.tc-node__meta {
  display: block;
  font-size: 12px;
  color: var(--tc-muted);
}
.tc-node--trigger {
  border-color: var(--tc-primary);
}
.tc-node--trigger .tc-node__icon {
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
}
.tc-node--condition .tc-node__icon {
  background: var(--tc-accent);
}
.tc-node--result {
  background: var(--tc-ink);
  border-color: var(--tc-ink);
}
.tc-node--result .tc-node__title {
  color: var(--tc-white);
}
.tc-node--result .tc-node__meta {
  color: rgba(255, 255, 255, 0.55);
}

@keyframes tc-flow-x {
  from {
    transform: translateX(0);
    opacity: 0;
  }
  15%, 85% {
    opacity: 1;
  }
  to {
    transform: translateX(52px);
    opacity: 0;
  }
}
@keyframes tc-flow-y {
  from {
    transform: translateY(0);
    opacity: 0;
  }
  15%, 85% {
    opacity: 1;
  }
  to {
    transform: translateY(32px);
    opacity: 0;
  }
}
/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.22 Floating card (image chip)
/*  Position with --tl --tr --bl --br --mr. Hidden below lg.
/*----------------------------------------*/
.tc-float-card {
  position: absolute;
  z-index: var(--tc-z-float);
  display: none;
  animation: tc-float 6s ease-in-out infinite;
}
@media only screen and (min-width: 992px) {
  .tc-float-card {
    display: block;
  }
}
.tc-float-card--tl {
  top: 8%;
  left: -4%;
}
.tc-float-card--tr {
  top: 12%;
  right: -4%;
  animation-delay: -2s;
}
.tc-float-card--mr {
  top: 52%;
  right: -6%;
  animation-delay: -3s;
}
.tc-float-card--bl {
  bottom: 8%;
  left: -3%;
  animation-delay: -4s;
}
.tc-float-card--br {
  bottom: 10%;
  right: -3%;
  animation-delay: -5s;
}

/* PNG carries the card face, border and shadow plus 32px transparent padding. The files are 2x artwork,
   so every chip is shown 128px tall and its width follows the image ratio */
.tc-float-card--shot {
  max-width: none;
  width: auto;
  height: 128px;
  margin: -32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

@keyframes tc-float {
  50% {
    transform: translateY(-12px);
  }
}
/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.23 Forms  .tc-form  .tc-subscribe
/*----------------------------------------*/
.tc-form__group {
  margin-bottom: 20px;
}
.tc-form__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-form__control {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
  font: inherit;
  color: var(--tc-heading);
  transition: border-color var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-form__control::placeholder {
  color: var(--tc-muted);
}
.tc-form__control:focus {
  outline: none;
  border-color: var(--tc-accent-deep);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc-accent) 18%, transparent);
}

.tc-subscribe {
  display: flex;
  gap: 8px;
  max-width: 460px;
  padding: 6px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
}
.tc-subscribe__input {
  flex: 1;
  min-width: 0;
  padding: 10px 18px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--tc-heading);
}
.tc-subscribe__input:focus {
  outline: none;
}
.tc-subscribe__input::placeholder {
  color: var(--tc-muted);
}
.tc-subscribe:focus-within {
  border-color: var(--tc-accent-deep);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc-accent) 16%, transparent);
}
.tc-subscribe__note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--tc-muted);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.24 Chart extras (reusable data-viz pieces)
/*  .tc-legend  .tc-funnel  .tc-heat  .tc-stack  .tc-spark  .tc-donut--split
/*  Palette: ink + lime + cyan + muted greys. Values via custom properties.
/*----------------------------------------*/
/* Legend: always paired with multi-series charts */
.tc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--tc-text);
}
.tc-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tc-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--tc-ink);
}
.tc-legend__swatch--lime {
  background: var(--tc-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc-ink) 25%, transparent);
}
.tc-legend__swatch--cyan {
  background: var(--tc-accent);
}
.tc-legend__swatch--grey {
  background: var(--tc-muted);
  opacity: 0.55;
}
.tc-legend__swatch--line {
  height: 3px;
  width: 14px;
  border-radius: 2px;
}
[data-theme=dark] .tc-legend__swatch:not(.tc-legend__swatch--lime):not(.tc-legend__swatch--cyan):not(.tc-legend__swatch--grey) {
  background: var(--tc-white);
}

/* Multi-segment donut: --tc-a / --tc-b / --tc-c are percentages */
.tc-donut--split {
  background: conic-gradient(var(--tc-ink) 0 calc(var(--tc-a, 40) * 1%), var(--tc-primary) 0 calc((var(--tc-a, 40) + var(--tc-b, 30)) * 1%), var(--tc-accent) 0 calc((var(--tc-a, 40) + var(--tc-b, 30) + var(--tc-c, 20)) * 1%), var(--tc-surface-2) 0);
}
[data-theme=dark] .tc-donut--split {
  background: conic-gradient(var(--tc-white) 0 calc(var(--tc-a, 40) * 1%), var(--tc-primary) 0 calc((var(--tc-a, 40) + var(--tc-b, 30)) * 1%), var(--tc-accent) 0 calc((var(--tc-a, 40) + var(--tc-b, 30) + var(--tc-c, 20)) * 1%), var(--tc-surface-2) 0);
}

/* Funnel: bars narrow with --tc-value, 2px gap between steps */
.tc-funnel {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-funnel__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: var(--tc-value, 100%);
  min-width: 150px;
  margin-inline: auto;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--tc-ink);
  color: var(--tc-white);
  font-size: 12px;
  line-height: 1.2;
}
.tc-funnel__step:nth-child(2) {
  background: color-mix(in srgb, var(--tc-ink) 78%, var(--tc-surface));
}
.tc-funnel__step:nth-child(3) {
  background: color-mix(in srgb, var(--tc-ink) 58%, var(--tc-surface));
}
.tc-funnel__step:nth-child(4) {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-funnel__step:nth-child(5) {
  background: var(--tc-accent);
  color: var(--tc-on-primary);
}
[data-theme=dark] .tc-funnel__step {
  color: var(--tc-on-primary);
  background: var(--tc-white);
}
[data-theme=dark] .tc-funnel__step:nth-child(2) {
  background: rgba(255, 255, 255, 0.78);
}
[data-theme=dark] .tc-funnel__step:nth-child(3) {
  background: rgba(255, 255, 255, 0.58);
}
.tc-funnel__label {
  font-weight: 500;
}
.tc-funnel__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Heat grid: cells tinted by --tc-level (0..1), single cyan hue light to dark */
.tc-heat {
  display: grid;
  gap: 2px;
  grid-template-columns: auto repeat(var(--tc-cols, 6), minmax(0, 1fr));
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tc-heat__head, .tc-heat__row {
  color: var(--tc-muted);
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 8px 4px 0;
  display: flex;
  align-items: center;
}
.tc-heat__head {
  justify-content: center;
  padding-inline: 0;
}
.tc-heat__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--tc-accent-deep) calc(var(--tc-level, 0.3) * 100%), var(--tc-surface-2));
  color: var(--tc-heading);
}
.tc-heat__cell--strong {
  color: var(--tc-white);
  background: color-mix(in srgb, var(--tc-accent-deep) calc(max(var(--tc-level, 0.3), 0.8) * 100%), var(--tc-surface-2));
}
.tc-heat__cell--empty {
  background: transparent;
}
[data-theme=dark] .tc-heat__cell {
  background: color-mix(in srgb, var(--tc-accent) calc(var(--tc-level, 0.3) * 100%), var(--tc-surface-2));
}
[data-theme=dark] .tc-heat__cell--strong {
  color: var(--tc-on-primary);
}
.tc-heat--compact .tc-heat__cell {
  min-height: 18px;
  font-size: 0;
}
.tc-heat--tall .tc-heat__cell {
  min-height: 36px;
  font-size: 12px;
}

/* Stacked bars: columns of segments, heights from --tc-value */
.tc-stack {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: var(--tc-height, 150px);
}
.tc-stack__col {
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  height: var(--tc-total, 100%);
  min-width: 0;
}
.tc-stack__seg {
  flex: var(--tc-value, 30) 1 0;
  min-height: 3px;
  background: var(--tc-ink);
  border-radius: 2px;
}
.tc-stack__seg--lime {
  background: var(--tc-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc-ink) 18%, transparent);
}
.tc-stack__seg--cyan {
  background: var(--tc-accent);
}
.tc-stack__seg:last-child {
  border-radius: 4px 4px 2px 2px;
}
.tc-stack__seg:first-child {
  border-radius: 2px 2px 0 0;
}
[data-theme=dark] .tc-stack__seg:not(.tc-stack__seg--lime):not(.tc-stack__seg--cyan) {
  background: rgba(255, 255, 255, 0.85);
}
.tc-stack__labels {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--tc-muted);
}
.tc-stack__labels span {
  flex: 1;
  text-align: center;
}

/* Sparkline: tiny inline SVG trend */
.tc-spark {
  display: block;
  width: 100%;
  max-width: 120px;
  height: 32px;
  overflow: visible;
}
.tc-spark__line {
  fill: none;
  stroke: var(--tc-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tc-spark__line--cyan {
  stroke: var(--tc-accent-deep);
}
.tc-spark__area {
  fill: var(--tc-primary);
  opacity: 0.45;
}
.tc-spark__end {
  fill: var(--tc-surface);
  stroke: var(--tc-ink);
  stroke-width: 2;
}
[data-theme=dark] .tc-spark__line {
  stroke: var(--tc-primary);
}
[data-theme=dark] .tc-spark__line--cyan {
  stroke: var(--tc-accent);
}
[data-theme=dark] .tc-spark__end {
  stroke: var(--tc-primary);
}
[data-theme=dark] .tc-spark__area {
  opacity: 0.18;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.25 Integration hub (ring of app tiles around a core node)
/*  .tc-hub > .tc-hub__core + .tc-hub__ring > .tc-hub__item > .tc-hub__tile
/*  Up to 8 items; plain grid below md.
/*----------------------------------------*/
.tc-hub {
  --tc-hub-radius: 190px;
  position: relative;
}
.tc-hub__core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 32px;
  padding: 20px 28px;
  border-radius: var(--tc-radius-lg);
  background: var(--tc-ink);
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  box-shadow: 0 0 0 10px var(--tc-bg), 0 0 0 11px var(--tc-border), var(--tc-shadow-lg);
}
.tc-hub__core img {
  height: 32px;
  width: auto;
}
.tc-hub__core small {
  font-size: 12px;
}
.tc-hub__ring {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media only screen and (min-width: 576px) {
  .tc-hub__ring {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tc-hub__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-sm);
  text-align: center;
  transition: transform var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-hub__tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--tc-shadow);
}
.tc-hub__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--tc-radius);
  background: var(--tc-surface-2);
  color: var(--tc-heading);
  font-size: 22px;
}
.tc-hub__name {
  font-family: var(--tc-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-heading);
}
@media only screen and (min-width: 768px) {
  .tc-hub {
    height: calc(var(--tc-hub-radius) * 2 + 120px);
  }
  .tc-hub::before, .tc-hub::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px dashed var(--tc-border);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .tc-hub::before {
    width: calc(var(--tc-hub-radius) * 2);
    height: calc(var(--tc-hub-radius) * 2);
  }
  .tc-hub::after {
    width: calc(var(--tc-hub-radius) * 1.2);
    height: calc(var(--tc-hub-radius) * 1.2);
  }
  .tc-hub__core {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 22px 30px;
    transform: translate(-50%, -50%);
  }
  .tc-hub__ring {
    display: block;
    position: absolute;
    inset: 0;
  }
  .tc-hub__item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: rotate(var(--tc-hub-angle, 0deg));
    /* spoke */
  }
  .tc-hub__item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: var(--tc-hub-radius);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--tc-muted) 0 4px, transparent 4px 8px);
    opacity: 0.45;
  }
  .tc-hub__item {
    /* flow dot */
  }
  .tc-hub__item::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tc-accent);
    animation: tc-hub-flow 3s infinite linear;
    animation-delay: var(--tc-hub-delay, 0s);
  }
  .tc-hub__tile {
    position: absolute;
    z-index: 1;
    top: 0;
    left: var(--tc-hub-radius);
    width: 108px;
    padding: 14px 8px;
    transform: translate(-50%, -50%) rotate(calc(var(--tc-hub-angle, 0deg) * -1));
  }
  .tc-hub__tile:hover {
    transform: translate(-50%, -50%) rotate(calc(var(--tc-hub-angle, 0deg) * -1)) scale(1.06);
  }
  .tc-hub__item:nth-child(1) {
    --tc-hub-angle: -90deg;
    --tc-hub-delay: -0.7s;
  }
  .tc-hub__item:nth-child(2) {
    --tc-hub-angle: -45deg;
    --tc-hub-delay: -1.4s;
  }
  .tc-hub__item:nth-child(3) {
    --tc-hub-angle: 0deg;
    --tc-hub-delay: -2.1s;
  }
  .tc-hub__item:nth-child(4) {
    --tc-hub-angle: 45deg;
    --tc-hub-delay: 0s;
  }
  .tc-hub__item:nth-child(5) {
    --tc-hub-angle: 90deg;
    --tc-hub-delay: -0.7s;
  }
  .tc-hub__item:nth-child(6) {
    --tc-hub-angle: 135deg;
    --tc-hub-delay: -1.4s;
  }
  .tc-hub__item:nth-child(7) {
    --tc-hub-angle: 180deg;
    --tc-hub-delay: -2.1s;
  }
  .tc-hub__item:nth-child(8) {
    --tc-hub-angle: 225deg;
    --tc-hub-delay: 0s;
  }
}
@media only screen and (min-width: 992px) {
  .tc-hub {
    --tc-hub-radius: 250px;
  }
  .tc-hub__tile {
    width: 120px;
  }
}

@keyframes tc-hub-flow {
  from {
    transform: translateX(80px);
    opacity: 0;
  }
  15%, 85% {
    opacity: 1;
  }
  to {
    transform: translateX(calc(var(--tc-hub-radius) - 60px));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tc-hub__item::after {
    animation: none;
    opacity: 0;
  }
}
/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.26 Code / terminal
/*  .tc-code  __tabs __tab __line __token
/*  Token modifiers: --keyword --string --comment --function --number --variable --prompt --success --muted
/*  Block modifiers: --numbered (line numbers)  --terminal (no numbers, prompt lines)
/*  Wrap in .tc-window for the chrome. Colours adapt to data-theme.
/*----------------------------------------*/
:root {
  --tc-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

.tc-code {
  --tc-code-keyword: #b6407a;
  --tc-code-string: #1a7f4b;
  --tc-code-comment: #6b6f62;
  --tc-code-function: #0b6fb8;
  --tc-code-number: #a35a00;
  --tc-code-variable: var(--tc-heading);
  overflow-x: auto;
  padding: 16px 20px 18px;
  background: var(--tc-bg-soft);
  font-family: var(--tc-font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--tc-text);
  text-align: left;
  counter-reset: tc-line;
}
[data-theme=dark] .tc-code {
  --tc-code-keyword: #ff7ab2;
  --tc-code-string: var(--tc-primary-bright);
  --tc-code-comment: rgba(255, 255, 255, 0.46);
  --tc-code-function: #5ad8ff;
  --tc-code-number: #ffb86b;
}
.tc-code__tabs {
  display: flex;
  gap: 0;
  margin: -16px -20px 14px;
  border-bottom: 1px solid var(--tc-border);
  background: var(--tc-surface-2);
}
.tc-code__tab {
  padding: 8px 16px;
  border-right: 1px solid var(--tc-border);
  font-size: 12px;
  color: var(--tc-muted);
}
.tc-code__tab i {
  margin-right: 6px;
}
.tc-code__tab--active {
  background: var(--tc-bg-soft);
  color: var(--tc-heading);
  box-shadow: inset 0 -2px 0 var(--tc-primary);
}
.tc-code__line {
  display: block;
  min-height: 1.8em;
  white-space: pre;
}
.tc-code--numbered .tc-code__line {
  counter-increment: tc-line;
}
.tc-code--numbered .tc-code__line::before {
  content: counter(tc-line);
  display: inline-block;
  width: 2ch;
  margin-right: 18px;
  text-align: right;
  color: var(--tc-muted);
  opacity: 0.7;
}
.tc-code__token--keyword {
  color: var(--tc-code-keyword);
}
.tc-code__token--string {
  color: var(--tc-code-string);
}
.tc-code__token--comment {
  color: var(--tc-code-comment);
  font-style: italic;
}
.tc-code__token--function {
  color: var(--tc-code-function);
}
.tc-code__token--number {
  color: var(--tc-code-number);
}
.tc-code__token--variable {
  color: var(--tc-code-variable);
}
.tc-code__token--prompt {
  color: var(--tc-link);
  user-select: none;
}
.tc-code__token--success {
  color: var(--tc-code-string);
}
.tc-code__token--muted {
  color: var(--tc-muted);
}
.tc-code--terminal {
  background: var(--tc-bg);
  font-size: 12px;
  line-height: 1.7;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.27 Ruled grid (hairline-divided cells, no card chrome)
/*  .tc-ruled  --2 --3 --4 --6   __cell  __icon  __title  __text  __meta
/*  Gaps are 1px of border colour; keep cell counts a multiple of the column count.
/*----------------------------------------*/
.tc-ruled {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-border);
}
@media only screen and (min-width: 768px) {
  .tc-ruled--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 768px) {
  .tc-ruled--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 992px) {
  .tc-ruled--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.tc-ruled--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media only screen and (min-width: 992px) {
  .tc-ruled--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tc-ruled--6 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media only screen and (min-width: 768px) {
  .tc-ruled--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 1201px) {
  .tc-ruled--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.tc-ruled__cell {
  position: relative;
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  background: var(--tc-bg);
  transition: background var(--tc-transition);
}
.tc-ruled__cell:hover {
  background: var(--tc-bg-soft);
}
.tc-ruled__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 22px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-bg-soft);
  color: var(--tc-primary-bright);
  font-size: 16px;
}
.tc-ruled__title {
  margin-bottom: 8px;
  font-size: 18px;
}
.tc-ruled__text {
  margin: 0;
  font-size: 15px;
}
.tc-ruled__meta {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--tc-font-mono);
  font-size: 12px;
  color: var(--tc-muted);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.28 Bento grid (mixed-size feature tiles)
/*  .tc-bento > .tc-bento__tile (--wide --half --tall --glow) with __icon __title __text __visual
/*  Mini-visual helpers: __query  __rows/__row  __lines  __bg
/*----------------------------------------*/
.tc-bento {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media only screen and (min-width: 768px) {
  .tc-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 992px) {
  .tc-bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
  }
}
.tc-bento__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 32px);
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  transition: border-color var(--tc-transition), transform var(--tc-transition);
}
@media only screen and (min-width: 992px) {
  .tc-bento__tile {
    grid-column: span 2;
  }
}
.tc-bento__tile:hover {
  border-color: var(--tc-muted);
}
@media only screen and (min-width: 768px) {
  .tc-bento__tile--wide {
    grid-column: 1/-1;
  }
}
@media only screen and (min-width: 992px) {
  .tc-bento__tile--wide {
    grid-column: span 4;
  }
}
@media only screen and (min-width: 992px) {
  .tc-bento__tile--half {
    grid-column: span 3;
  }
}
@media only screen and (min-width: 992px) {
  .tc-bento__tile--tall {
    grid-row: span 2;
  }
}
.tc-bento__tile--glow::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tc-glow), transparent);
  pointer-events: none;
}
.tc-bento__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 18px;
}
.tc-bento__icon--accent {
  background: var(--tc-accent);
}
.tc-bento__icon--soft {
  background: var(--tc-surface-2);
  color: var(--tc-heading);
}
.tc-bento__title {
  margin: 0;
  font-size: clamp(19px, 1.8vw, 22px);
}
.tc-bento__text {
  margin: 0;
  font-size: 15px;
  max-width: 46ch;
}
.tc-bento__body {
  position: relative;
  z-index: var(--tc-z-base);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tc-bento__visual {
  position: relative;
  z-index: var(--tc-z-base);
  margin-top: auto;
  padding-top: 8px;
}
.tc-bento__chart {
  height: 120px;
  margin-bottom: 18px;
  gap: 6px;
}
.tc-bento__query {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-bg-soft);
  font-size: 14px;
  color: var(--tc-heading);
}
.tc-bento__query i {
  color: var(--tc-accent);
}
.tc-bento__rows {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.tc-bento__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}
.tc-bento__row strong {
  text-align: right;
  color: var(--tc-heading);
}
.tc-bento__lines {
  display: grid;
  gap: 10px;
}
.tc-bento__lines span {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--tc-surface-2);
}
.tc-bento__lines span:nth-child(1) {
  width: 92%;
  background: var(--tc-muted);
  opacity: 0.6;
}
.tc-bento__lines span:nth-child(2) {
  width: 78%;
}
.tc-bento__lines span:nth-child(3) {
  width: 86%;
}
.tc-bento__lines span:nth-child(4) {
  width: 54%;
}
.tc-bento__bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  mask-image: linear-gradient(to left, var(--tc-black) 20%, transparent);
  -webkit-mask-image: linear-gradient(to left, var(--tc-black) 20%, transparent);
  pointer-events: none;
}
@media only screen and (max-width: 767px) {
  .tc-bento__bg {
    opacity: 0.2;
    width: 100%;
  }
}
.tc-bento__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*----------------------------------------*/
/*  3.29 Breadcrumb
/*----------------------------------------*/
.tc-breadcrumb {
  display: inline-block;
  margin-bottom: 24px;
}
.tc-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  margin: 0;
  padding: 6px 18px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  font-size: 14px;
}
.tc-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tc-muted);
}
.tc-breadcrumb__item a {
  color: var(--tc-text);
}
.tc-breadcrumb__item a:hover {
  color: var(--tc-link);
}
.tc-breadcrumb__item:not(:last-child)::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--tc-muted);
  border-right: 1.5px solid var(--tc-muted);
  transform: rotate(45deg);
}
.tc-breadcrumb__item.is-current {
  font-weight: 600;
  color: var(--tc-heading);
}

/*----------------------------------------*/
/*  3.30 Filter buttons (behaviour: tc-main.js)
/*----------------------------------------*/
.tc-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
}
.tc-filter__btn {
  padding: 9px 20px;
  border: 0;
  border-radius: var(--tc-radius-pill);
  background: transparent;
  font-family: var(--tc-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-text);
  cursor: pointer;
  transition: background var(--tc-transition), color var(--tc-transition);
}
.tc-filter__btn:hover {
  color: var(--tc-heading);
}
.tc-filter__btn.is-active {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}

/*----------------------------------------*/
/*  3.31 Prose  .tc-prose  (long-form article / legal text)
/*----------------------------------------*/
.tc-prose {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--tc-text);
  overflow-wrap: break-word;
}
.tc-prose > :first-child {
  margin-top: 0;
}
.tc-prose > :last-child {
  margin-bottom: 0;
}
.tc-prose__lead {
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.6;
  color: var(--tc-heading);
}
.tc-prose h2, .tc-prose h3, .tc-prose h4 {
  color: var(--tc-heading);
  scroll-margin-top: calc(var(--tc-header-height) + 24px);
}
.tc-prose h2 {
  margin: 2.2em 0 0.7em;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.25;
}
.tc-prose h3 {
  margin: 1.9em 0 0.6em;
  font-size: clamp(21px, 2.2vw, 24px);
  line-height: 1.3;
}
.tc-prose h4 {
  margin: 1.6em 0 0.5em;
  font-size: 18px;
}
.tc-prose p {
  margin: 0 0 1.4em;
}
.tc-prose strong {
  color: var(--tc-heading);
  font-weight: 600;
}
.tc-prose a {
  color: var(--tc-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tc-prose a:hover {
  text-decoration-thickness: 2px;
}
.tc-prose ul, .tc-prose ol {
  margin: 0 0 1.5em;
  padding-left: 1.4em;
}
.tc-prose ul li, .tc-prose ol li {
  margin-bottom: 0.55em;
  padding-left: 0.3em;
}
.tc-prose ul li::marker, .tc-prose ol li::marker {
  color: var(--tc-heading);
  font-weight: 600;
}
.tc-prose ul {
  list-style: disc;
}
.tc-prose ol {
  list-style: decimal;
}
.tc-prose li > ul, .tc-prose li > ol {
  margin: 0.6em 0 0;
}
.tc-prose blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 28px;
  border-left: 4px solid var(--tc-primary);
  font-family: var(--tc-font-heading);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--tc-heading);
}
.tc-prose blockquote p {
  margin: 0;
}
.tc-prose blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--tc-font-body);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  color: var(--tc-muted);
}
.tc-prose code {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--tc-surface-2);
  font-size: 0.88em;
  color: var(--tc-heading);
}
.tc-prose pre {
  margin: 0 0 1.6em;
  padding: 22px 24px;
  overflow-x: auto;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface-2);
  font-size: 14px;
  line-height: 1.7;
}
.tc-prose pre code {
  padding: 0;
  background: transparent;
  font-size: inherit;
}
.tc-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--tc-radius-lg);
}
.tc-prose figure {
  margin: 2em 0;
}
.tc-prose figure img {
  width: 100%;
}
.tc-prose figcaption {
  margin-top: 12px;
  font-size: 14px;
  text-align: center;
  color: var(--tc-muted);
}
.tc-prose hr {
  margin: 2.6em 0;
  border: 0;
  border-top: 1px solid var(--tc-border);
  opacity: 1;
}
.tc-prose table {
  display: block;
  width: 100%;
  margin: 0 0 1.6em;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 15px;
}
.tc-prose table th, .tc-prose table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--tc-border);
  text-align: left;
  vertical-align: top;
}
.tc-prose table th {
  font-family: var(--tc-font-heading);
  font-weight: 600;
  color: var(--tc-heading);
  background: var(--tc-surface-2);
  white-space: nowrap;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
/*  Images:  .tc-popup-gallery > a.tc-popup-image     Video: a.tc-popup-video
/*----------------------------------------*/
.mfp-bg {
  z-index: 1300;
  background: var(--tc-ink);
}

.mfp-wrap {
  z-index: 1301;
}

.mfp-fade.mfp-bg {
  opacity: 0;
  transition: opacity 0.24s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.92;
}

.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: opacity 0.24s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

.mfp-iframe-holder .mfp-content {
  max-width: 1100px;
}

.mfp-iframe-scaler iframe {
  border-radius: var(--tc-radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.mfp-img {
  border-radius: var(--tc-radius);
}

img.mfp-img {
  padding: 40px 0;
}

.mfp-title, .mfp-counter {
  font-family: var(--tc-font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}

.mfp-close, .mfp-arrow {
  opacity: 1;
}

/* the close button never moves or rotates under the pointer (that made the hover flicker): fixed centred hit area, background fades in */
.mfp-close, .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  line-height: 44px;
  text-align: center;
  border-radius: 50%;
  color: var(--tc-white);
  font-family: var(--tc-font-body);
  transition: background-color var(--tc-transition);
}
.mfp-close:hover, .mfp-close:focus, .mfp-image-holder .mfp-close:hover, .mfp-image-holder .mfp-close:focus, .mfp-iframe-holder .mfp-close:hover, .mfp-iframe-holder .mfp-close:focus {
  background: rgba(255, 255, 255, 0.16);
}
.mfp-close:active, .mfp-image-holder .mfp-close:active, .mfp-iframe-holder .mfp-close:active {
  top: 0;
}

/* video popup: the button never touches the iframe (a cross-origin iframe steals the pointer, which made the hover flip).
   Phones: it sits just above the video. Tablet and up: it is pinned to the top-right corner of the screen, so it stays
   fully visible however short the window is. */
.mfp-iframe-holder {
  padding-top: 56px;
}

.mfp-iframe-holder .mfp-close {
  top: -48px;
  right: 0;
}

@media only screen and (min-width: 768px) {
  .mfp-iframe-holder .mfp-close {
    position: fixed;
    top: 16px;
    right: 16px;
  }
}
.mfp-arrow {
  transition: opacity var(--tc-transition);
}

.mfp-arrow:active {
  margin-top: -55px;
} /* the library nudges it 1px on press, which flips the hover state */
.mfp-arrow:hover:before, .mfp-arrow:hover:after {
  opacity: 1;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
/*  Dark in both themes: the page behind it may still be switching theme.
/*----------------------------------------*/
.tc-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--tc-ink);
  color: var(--tc-white);
  transition: opacity 0.6s var(--tc-ease), visibility 0.6s var(--tc-ease);
}
.tc-preloader::before {
  content: "";
  position: absolute;
  width: min(54vw, 420px);
  height: min(54vw, 420px);
  border-radius: 50%;
  background: color-mix(in srgb, var(--tc-primary) 18%, transparent);
  filter: blur(60px);
  animation: tc-preloader-glow 3.6s ease-in-out infinite alternate;
}
.tc-preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.tc-preloader.is-done .tc-preloader__inner {
  opacity: 0;
  transform: translateY(-14px);
}
.tc-preloader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.tc-preloader__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin-bottom: 28px;
}
.tc-preloader__ring-track {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}
.tc-preloader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--tc-primary) 0deg, var(--tc-accent) 110deg, transparent 280deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--tc-black) calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--tc-black) calc(100% - 2px));
  animation: tc-preloader-spin 1.3s linear infinite;
}
.tc-preloader__core {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 24px;
  box-shadow: 0 0 0 8px var(--tc-ink);
  animation: tc-preloader-pulse 1.6s ease-in-out infinite;
}
.tc-preloader__logo {
  display: flex;
  margin-bottom: 22px;
  font-family: var(--tc-font-heading);
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1;
}
.tc-preloader__logo span {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  animation: tc-preloader-letter 0.5s var(--tc-ease) forwards;
}
.tc-preloader__logo span:nth-child(1) {
  animation-delay: 0.08s;
}
.tc-preloader__logo span:nth-child(2) {
  animation-delay: 0.13s;
}
.tc-preloader__logo span:nth-child(3) {
  animation-delay: 0.18s;
}
.tc-preloader__logo span:nth-child(4) {
  animation-delay: 0.23s;
}
.tc-preloader__logo span:nth-child(5) {
  animation-delay: 0.28s;
}
.tc-preloader__logo span:nth-child(6) {
  animation-delay: 0.33s;
}
.tc-preloader__logo span:nth-child(7) {
  animation-delay: 0.38s;
}
.tc-preloader__logo span:nth-child(8) {
  animation-delay: 0.43s;
}
.tc-preloader__logo span:nth-child(9) {
  animation-delay: 0.48s;
}
.tc-preloader__bar {
  width: 132px;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}
.tc-preloader__bar span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--tc-primary);
  transform: translateX(-100%);
  animation: tc-preloader-bar 1.5s var(--tc-ease) forwards;
}
.tc-preloader__status {
  margin: 14px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

@keyframes tc-preloader-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes tc-preloader-pulse {
  50% {
    transform: scale(0.92);
  }
}
@keyframes tc-preloader-glow {
  to {
    transform: scale(1.25);
    opacity: 0.7;
  }
}
@keyframes tc-preloader-letter {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tc-preloader-bar {
  to {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tc-preloader::before, .tc-preloader__ring, .tc-preloader__core {
    animation: none;
  }
  .tc-preloader__logo span {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .tc-preloader__bar span {
    transform: none;
    animation: none;
  }
}
/*----------------------------------------*/
/*  04–06. Layout Index (Header, Footer, Sections)
/*----------------------------------------*/
/*----------------------------------------*/
/*  04. Header Index
/*----------------------------------------*/
/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  4.1 Header & navigation
/*  Blocks: .tc-header  .tc-menu  .tc-topbar
/*  Modifiers: --solid --centered --pill --bordered --menu-only   (colour via data-theme)
/*----------------------------------------*/
.tc-topbar {
  display: flex;
  align-items: center;
  min-height: 38px;
  background: var(--tc-ink);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.tc-topbar .container {
  width: 100%;
}
.tc-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}
.tc-topbar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
}
.tc-topbar__link {
  color: rgba(255, 255, 255, 0.9);
}
.tc-topbar__link:hover {
  color: var(--tc-primary-bright);
}
.tc-topbar__link i {
  margin-right: 6px;
  color: var(--tc-primary-bright);
}
.tc-topbar__aside {
  display: none;
  align-items: center;
  gap: 24px;
}
@media only screen and (min-width: 768px) {
  .tc-topbar__aside {
    display: flex;
  }
}
.tc-topbar__lang {
  color: rgba(255, 255, 255, 0.72);
}
.tc-topbar__lang i {
  margin-right: 6px;
}
.tc-topbar__cta {
  font-weight: 600;
}
.tc-topbar__cta i {
  margin: 0 0 0 4px;
  font-size: 11px;
}
.tc-topbar__item--wide {
  display: none;
}
@media only screen and (min-width: 576px) {
  .tc-topbar__item--wide {
    display: block;
  }
}

.tc-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--tc-z-header);
  height: var(--tc-header-height);
  color: var(--tc-heading);
  transition: background var(--tc-transition), box-shadow var(--tc-transition), transform var(--tc-transition), top var(--tc-transition);
}
.tc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--tc-header-height);
}
.tc-header__brand {
  display: inline-flex;
  flex-shrink: 0;
}
.tc-header__brand img {
  width: 150px;
}
@media only screen and (max-width: 480px) {
  .tc-header__brand img {
    width: 120px;
  }
}
.tc-header__logo--light {
  display: none;
}
.tc-header__nav {
  display: flex;
  align-items: stretch;
  align-self: stretch;
}
.tc-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media only screen and (max-width: 480px) {
  .tc-header__actions {
    gap: 6px;
  }
}
.tc-header__action, .tc-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tc-border);
  border-radius: 50%;
  background: var(--tc-surface);
  font-size: 17px;
  line-height: 1;
  color: var(--tc-heading);
  cursor: pointer;
  transition: background var(--tc-transition), border-color var(--tc-transition), color var(--tc-transition);
}
.tc-header__action:hover, .tc-header__toggle:hover {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-header__toggle {
  font-size: 18px;
}
.tc-header.is-sticky {
  background: var(--tc-header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--tc-border);
}
.tc-header--solid {
  background: var(--tc-bg);
  box-shadow: 0 1px 0 var(--tc-border);
}
.tc-header--bordered {
  border-bottom: 1px solid var(--tc-border);
}
.tc-header--centered .tc-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
@media only screen and (max-width: 767px) {
  .tc-header--centered .tc-header__inner {
    display: flex;
  }
}
.tc-header--centered .tc-header__brand {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}
.tc-header--centered .tc-header__nav {
  grid-column: 1;
  grid-row: 1;
}
.tc-header--centered .tc-header__actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
.tc-header--pill {
  top: 16px;
  height: auto;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.tc-header--pill .tc-header__inner {
  height: 64px;
  margin-inline: auto;
  padding: 0 10px 0 22px;
}
@media only screen and (max-width: 480px) {
  .tc-header--pill .tc-header__inner {
    padding-left: 14px;
  }
}
.tc-header--pill .tc-header__inner {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--tc-shadow);
}
.tc-header--pill.is-sticky {
  background: none;
  box-shadow: none;
  top: 10px;
}
[data-theme=dark] .tc-header .tc-header__logo--dark, .tc-header[data-theme=dark] .tc-header__logo--dark {
  display: none;
}
[data-theme=dark] .tc-header .tc-header__logo--light, .tc-header[data-theme=dark] .tc-header__logo--light {
  display: block;
}
.tc-header--has-topbar {
  top: 38px;
}
.tc-header--has-topbar.is-sticky {
  top: 0;
}
.tc-header--menu-only .tc-header__nav {
  display: none;
}
.tc-header--centered .tc-header__nav .tc-menu__item--secondary {
  display: none;
}
.tc-header {
  /* below xl the primary menu lives in the offcanvas drawer; the ghost link only fits from xxl */
}
@media only screen and (max-width: 1200px) {
  .tc-header__nav {
    display: none;
  }
}
.tc-header__actions .tc-btn {
  display: none;
}
@media only screen and (min-width: 1400px) {
  .tc-header__actions .tc-btn {
    display: inline-flex;
  }
}
@media only screen and (max-width: 767px) {
  .tc-header__actions .tc-btn {
    display: none;
  }
}

.tc-menu {
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.tc-menu__item {
  position: relative;
  display: flex;
  align-items: center;
}
.tc-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 9px;
  white-space: nowrap;
}
@media only screen and (min-width: 1400px) {
  .tc-menu__link {
    padding-inline: 12px;
  }
}
.tc-menu__link {
  border-radius: var(--tc-radius-pill);
  font-family: var(--tc-font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-menu__link:hover, .tc-menu__link.is-active {
  color: var(--tc-link);
}
.tc-menu__item--has-sub > .tc-menu__link::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--tc-transition);
}
.tc-menu__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: var(--tc-z-overlay);
  min-width: 220px;
  margin-top: 0;
  padding: 10px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* a fading menu must not catch the pointer */
  transform: translate(-50%, 8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  /* invisible bridge so the pointer can travel from the link to the panel without closing it */
}
.tc-menu__sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.tc-menu__sub--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 2px;
  min-width: 480px;
}
.tc-menu__sub--mega {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 6px 14px;
  min-width: 720px;
  padding: 18px;
  align-items: start;
}
.tc-menu__sub-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--tc-radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--tc-text);
}
.tc-menu__sub-link:hover {
  background: var(--tc-surface-2);
  color: var(--tc-heading);
}
.tc-menu__sub-link i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--tc-surface-2);
  font-size: 13px;
  color: var(--tc-heading);
}
.tc-menu__sub-link small {
  display: block;
  font-size: 12px;
  color: var(--tc-muted);
}
.tc-menu__sub-link strong {
  display: block;
  font-size: 14px;
  color: var(--tc-heading);
}
.tc-menu__item--has-sub:hover > .tc-menu__sub, .tc-menu__item--has-sub:focus-within > .tc-menu__sub, .tc-menu__item--has-sub.is-open > .tc-menu__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

/* light / dark switch (behaviour: tc-main.js) */
.tc-theme-toggle__sun {
  display: none;
}

:root[data-theme=dark] .tc-theme-toggle__moon {
  display: none;
}

:root[data-theme=dark] .tc-theme-toggle__sun {
  display: inline-block;
}

.tc-menu__link--button {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.tc-menu__sub--list {
  min-width: 300px;
}
.tc-menu__sub-link.is-current {
  background: var(--tc-surface-2);
  color: var(--tc-heading);
}
.tc-menu__sub-link.is-current i {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-menu__sub--end {
  left: auto;
  right: 0;
  transform: translate(0, 8px);
}
.tc-menu__item--has-sub:hover > .tc-menu__sub--end, .tc-menu__item--has-sub:focus-within > .tc-menu__sub--end, .tc-menu__item--has-sub.is-open > .tc-menu__sub--end {
  transform: translate(0, 0);
}
.tc-menu__group-title {
  margin: 0 0 6px 14px;
  font-family: var(--tc-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-menu__group-list {
  display: block;
}
.tc-menu {
  /* Home: simple list that starts at the left edge of its link */
}
.tc-menu__sub--start {
  left: 0;
  transform: translate(0, 8px);
}
.tc-menu__item--has-sub:hover > .tc-menu__sub--start, .tc-menu__item--has-sub:focus-within > .tc-menu__sub--start, .tc-menu__item--has-sub.is-open > .tc-menu__sub--start {
  transform: translate(0, 0);
}
.tc-menu {
  /* Product / Pages: full-width panel anchored to the header */
}
.tc-menu__item--mega {
  position: static;
}
.tc-menu__sub--mega {
  left: 0;
  right: 0;
  min-width: 0;
  margin-top: 0;
  padding: 28px calc((100% - min(1200px, 100% - 48px)) / 2 - 14px) 32px;
  gap: 8px 40px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-width: 1px 0 0;
  border-radius: 0 0 var(--tc-radius-xl) var(--tc-radius-xl);
  transform: translateY(8px);
}
.tc-menu__sub--mega::before {
  top: -20px;
  height: 20px;
}
.tc-menu__sub--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 28px;
}
.tc-menu__item--has-sub:hover > .tc-menu__sub--mega, .tc-menu__item--has-sub:focus-within > .tc-menu__sub--mega, .tc-menu__item--has-sub.is-open > .tc-menu__sub--mega {
  transform: translateY(0);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  4.2 Offcanvas drawer
/*  .tc-offcanvas  (state: .is-open)  --menu  (menu visible at every width)
/*  The primary menu is cloned into __menu by tc-main.js.
/*----------------------------------------*/
.tc-offcanvas {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--tc-z-offcanvas);
  width: min(420px, 100%);
  padding: 40px clamp(24px, 4vw, 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--tc-bg);
  color: var(--tc-text);
  box-shadow: var(--tc-shadow-lg);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.45s var(--tc-ease), visibility 0s linear 0.45s;
}
.tc-offcanvas.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
.tc-offcanvas__overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--tc-z-offcanvas) - 1);
  background: rgba(11, 12, 8, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tc-transition), visibility var(--tc-transition);
}
.tc-offcanvas__overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
.tc-offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}
.tc-offcanvas__logo {
  display: inline-flex;
}
.tc-offcanvas__logo img {
  width: 140px;
}
.tc-offcanvas__logo-img--light {
  display: none;
}
[data-theme=dark] .tc-offcanvas__logo-img--dark {
  display: none;
}
[data-theme=dark] .tc-offcanvas__logo-img--light {
  display: block;
}
.tc-offcanvas__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tc-border);
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  color: var(--tc-heading);
  cursor: pointer;
  transition: background var(--tc-transition), transform var(--tc-transition);
}
.tc-offcanvas__close:hover {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  transform: rotate(90deg);
}
.tc-offcanvas__menu {
  display: block;
  margin-bottom: 36px;
}
.tc-offcanvas--menu .tc-offcanvas__menu {
  display: block;
}
.tc-offcanvas__title, .tc-offcanvas__subtitle {
  margin-bottom: 12px;
  font-family: var(--tc-font-heading);
  font-weight: 700;
  color: var(--tc-heading);
}
.tc-offcanvas__title {
  font-size: 22px;
}
.tc-offcanvas__subtitle {
  font-size: 17px;
}
.tc-offcanvas__content {
  margin-bottom: 32px;
}
.tc-offcanvas__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 36px;
}
.tc-offcanvas__thumb-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--tc-radius-sm);
}
.tc-offcanvas__thumb-link::after {
  content: "\f00e";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 7 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  color: var(--tc-white);
  background: color-mix(in srgb, var(--tc-ink) 55%, transparent);
  opacity: 0;
  transition: opacity var(--tc-transition);
}
.tc-offcanvas__thumb-link:hover::after, .tc-offcanvas__thumb-link:focus-visible::after {
  opacity: 1;
}
.tc-offcanvas__thumb-link:hover .tc-offcanvas__thumb {
  transform: scale(1.08);
}
.tc-offcanvas__thumb {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-sm);
  object-fit: cover;
  transition: transform 0.4s var(--tc-ease);
}
.tc-offcanvas__video {
  position: relative;
  display: block;
  margin-bottom: 36px;
  overflow: hidden;
  border-radius: var(--tc-radius-lg);
}
.tc-offcanvas__video-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.5s var(--tc-ease);
}
.tc-offcanvas__video:hover .tc-offcanvas__video-img {
  transform: scale(1.05);
}
.tc-offcanvas__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 18px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc-primary) 50%, transparent);
  animation: tc-pulse 2.2s infinite;
}
.tc-offcanvas__video-play i {
  margin-left: 3px;
}
.tc-offcanvas__video-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 36px 18px 14px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--tc-ink) 75%, transparent));
  color: var(--tc-white);
}
.tc-offcanvas__video-copy strong {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 15px;
}
.tc-offcanvas__video-copy small {
  font-size: 12px;
  opacity: 0.8;
}
.tc-offcanvas__info {
  margin-bottom: 36px;
}
.tc-offcanvas__info span {
  display: block;
  margin-bottom: 6px;
}
.tc-offcanvas__info a:not(.tc-btn) {
  color: inherit;
}
.tc-offcanvas__info a:not(.tc-btn):hover {
  color: var(--tc-link);
}
.tc-offcanvas__info .tc-btn {
  margin-top: 18px;
}
.tc-offcanvas__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tc-offcanvas__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--tc-radius);
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  transition: background var(--tc-transition), transform var(--tc-transition);
}
.tc-offcanvas__social-link:hover {
  background: var(--tc-ink);
  color: var(--tc-white);
  transform: translateY(-3px);
}
.tc-offcanvas {
  /* cloned primary menu */
}
.tc-offcanvas .tc-menu {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.tc-offcanvas .tc-menu__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--tc-border);
}
.tc-offcanvas .tc-menu__link {
  flex: 1;
  padding: 14px 4px;
  border-radius: 0;
  font-size: 17px;
}
.tc-offcanvas .tc-menu__link::after {
  display: none;
}
.tc-offcanvas .tc-menu .tc-menu__sub {
  position: static;
  display: none;
  flex-basis: 100%;
  min-width: 0;
  margin: 0 0 12px;
  padding: 0 0 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  grid-template-columns: 1fr;
}
.tc-offcanvas .tc-menu__item.is-open > .tc-menu__sub {
  display: grid;
}
.tc-offcanvas .tc-menu__toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-sm);
  background: transparent;
  cursor: pointer;
  transition: background var(--tc-transition), border-color var(--tc-transition);
}
.tc-offcanvas .tc-menu__toggle::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 15px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--tc-heading);
  border-bottom: 2px solid var(--tc-heading);
  transform: rotate(45deg);
  transition: transform var(--tc-transition), top var(--tc-transition);
}
.tc-offcanvas .tc-menu__toggle:hover {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
}
.tc-offcanvas .tc-menu__item.is-open > .tc-menu__toggle::before {
  transform: rotate(225deg);
  top: 17px;
}
.tc-offcanvas .tc-menu__item--secondary {
  display: flex;
}
.tc-offcanvas .tc-menu__link--button {
  text-align: left;
}
.tc-offcanvas .tc-menu .tc-menu__sub--mega {
  grid-template-columns: 1fr;
  min-width: 0;
  padding: 0 0 0 12px;
  gap: 10px;
  border-width: 0;
}
.tc-offcanvas .tc-menu .tc-menu__sub {
  pointer-events: auto;
  transition: none;
}
.tc-offcanvas .tc-menu .tc-menu__sub::before {
  display: none;
}
.tc-offcanvas .tc-menu__item--mega {
  position: relative;
}
.tc-offcanvas .tc-menu .tc-menu__sub--end {
  right: auto;
}
.tc-offcanvas .tc-menu__group-title {
  margin: 8px 0 4px 0;
}

@keyframes tc-pulse {
  70% {
    box-shadow: 0 0 0 16px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tc-offcanvas__video-play {
    animation: none;
  }
}
/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  4.3 Search overlay
/*  .tc-search  (state: .is-open)
/*----------------------------------------*/
.tc-search {
  position: fixed;
  inset: 0 0 auto;
  z-index: calc(var(--tc-z-offcanvas) + 1);
  padding: 40px 0 72px;
  background: var(--tc-bg);
  box-shadow: var(--tc-shadow-lg);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform 0.45s var(--tc-ease), visibility 0s linear 0.45s;
}
.tc-search.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
.tc-search__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--tc-z-offcanvas);
  background: rgba(11, 12, 8, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tc-transition), visibility var(--tc-transition);
}
.tc-search__overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
.tc-search__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(36px, 7vw, 72px);
}
.tc-search__logo {
  display: inline-flex;
}
.tc-search__logo img {
  width: 140px;
}
.tc-search__logo-img--light {
  display: none;
}
[data-theme=dark] .tc-search__logo-img--dark {
  display: none;
}
[data-theme=dark] .tc-search__logo-img--light {
  display: block;
}
.tc-search__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--tc-border);
  border-radius: 50%;
  background: transparent;
  font-size: 20px;
  color: var(--tc-heading);
  cursor: pointer;
  transition: background var(--tc-transition), transform var(--tc-transition);
}
.tc-search__close:hover {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  transform: rotate(90deg);
}
.tc-search__field {
  position: relative;
  max-width: 860px;
  margin-inline: auto;
}
.tc-search__input {
  width: 100%;
  height: 64px;
  padding: 0 56px 0 0;
  border: 0;
  border-bottom: 1px solid var(--tc-border);
  background: transparent;
  font-family: var(--tc-font-heading);
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-search__input:focus {
  outline: none;
}
.tc-search__input:focus ~ .tc-search__line {
  width: 100%;
}
.tc-search__input::placeholder {
  color: var(--tc-muted);
}
.tc-search__line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--tc-primary);
  transition: width 0.6s var(--tc-ease);
}
.tc-search__submit {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  padding: 8px;
  border: 0;
  background: transparent;
  font-size: 22px;
  color: var(--tc-heading);
  cursor: pointer;
}
.tc-search__submit:hover {
  color: var(--tc-link);
}
.tc-search__hint {
  max-width: 860px;
  margin: 18px auto 0;
  font-size: 14px;
  color: var(--tc-muted);
}

/*----------------------------------------*/
/*  05. Footer Index
/*----------------------------------------*/
/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  5.1 Footer
/*  .tc-footer  (colour via data-theme)  --minimal --centered
/*----------------------------------------*/
.tc-footer {
  position: relative;
  padding-top: clamp(56px, 7vw, 96px);
  background: var(--tc-bg);
  color: var(--tc-text);
}
.tc-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  padding-bottom: 56px;
}
@media only screen and (min-width: 992px) {
  .tc-footer__top {
    grid-template-columns: 1.5fr repeat(4, 1fr);
  }
}
.tc-footer__brand img {
  width: 160px;
  margin-bottom: 20px;
}
.tc-footer__logo-img--light {
  display: none;
}
[data-theme=dark] .tc-footer__logo-img--dark {
  display: none;
}
[data-theme=dark] .tc-footer__logo-img--light {
  display: block;
}
.tc-footer__about {
  max-width: 340px;
  margin-bottom: 24px;
}
.tc-footer__title {
  margin-bottom: 20px;
  font-size: 16px;
}
.tc-footer__links li + li {
  margin-top: 0;
}
.tc-footer__link {
  display: inline-block;
  padding-block: 6px;
  font-size: 15px;
}
.tc-footer__link:hover {
  color: var(--tc-link);
}
.tc-footer__columns {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media only screen and (min-width: 992px) {
  .tc-footer__columns {
    display: contents;
  }
}
.tc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 28px;
  border-top: 1px solid var(--tc-border);
  font-size: 14px;
}
.tc-footer__copy {
  margin: 0;
}
.tc-footer__social {
  display: flex;
  gap: 10px;
}
.tc-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tc-border);
  border-radius: 50%;
  font-size: 14px;
  color: var(--tc-heading);
  transition: background var(--tc-transition), color var(--tc-transition), border-color var(--tc-transition);
}
.tc-footer__social-link:hover {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
  color: var(--tc-on-primary);
}

/*----------------------------------------*/
/*  06. Sections Index
/*----------------------------------------*/
/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.1 Generic layout helpers shared by all homes
/*  .tc-split  .tc-checklist  .tc-band  .tc-media
/*----------------------------------------*/
.tc-split {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .tc-split {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .tc-split--reverse .tc-split__media {
    order: -1;
  }
}
@media only screen and (min-width: 992px) {
  .tc-split--wide-media {
    grid-template-columns: 0.8fr 1.2fr;
  }
}
.tc-split__content {
  min-width: 0;
}
.tc-split__media {
  position: relative;
  min-width: 0;
}

.tc-checklist {
  margin: 24px 0 32px;
}
.tc-checklist__item {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
  color: var(--tc-heading);
  font-weight: 500;
}
.tc-checklist__item i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 10px;
}
.tc-checklist__item small {
  display: block;
  font-weight: 400;
  font-size: 15px;
  color: var(--tc-text);
}

.tc-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--tc-radius-xl);
}
.tc-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc-media--4x3 {
  aspect-ratio: 4/3;
}
.tc-media--square {
  aspect-ratio: 1;
}
.tc-media--portrait {
  aspect-ratio: 4/5;
}
.tc-media--wide {
  aspect-ratio: 16/9;
}

.tc-band {
  padding: clamp(36px, 5vw, 64px);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-inverse-bg);
  border: 1px solid var(--tc-inverse-border);
  color: rgba(255, 255, 255, 0.7);
}
.tc-band .tc-stat__value {
  color: var(--tc-white);
}
.tc-band .tc-stat__label {
  color: rgba(255, 255, 255, 0.6);
}
.tc-band--lime {
  background: var(--tc-primary);
  color: color-mix(in srgb, var(--tc-on-primary) 75%, transparent);
}
.tc-band--lime .tc-stat__value {
  color: var(--tc-on-primary);
}
.tc-band--lime .tc-stat__label {
  color: color-mix(in srgb, var(--tc-on-primary) 70%, transparent);
}

.tc-bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--tc-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--tc-grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, var(--tc-black) 30%, transparent 75%);
}

.tc-bg-glow {
  position: absolute;
  z-index: 0;
  width: 640px;
  height: 640px;
  max-width: 90vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tc-glow), transparent);
  pointer-events: none;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.2 Hero (base)
/*  .tc-hero  --centered --split --dark --compact
/*----------------------------------------*/
.tc-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--tc-header-height) + clamp(48px, 7vw, 96px)) 0 clamp(56px, 7vw, 96px);
  background: var(--tc-bg);
}
.tc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.tc-hero__inner {
  position: relative;
  z-index: var(--tc-z-base);
}
.tc-hero__content {
  max-width: 720px;
}
.tc-hero--centered .tc-hero__content {
  max-width: 880px;
}
.tc-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--tc-heading);
}
.tc-hero__badge .tc-badge {
  padding: 3px 12px;
}
.tc-hero__title {
  font-family: var(--tc-font-heading);
  font-size: clamp(40px, 27.4782608696px + 3.4782608696vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--tc-heading);
  margin-bottom: 24px;
}
.tc-hero__text {
  max-width: 560px;
  margin-bottom: 36px;
  font-size: clamp(16px, 1.5vw, 19px);
}
.tc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.tc-hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 40px;
  font-size: 14px;
}
.tc-hero__media {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
}
.tc-hero--centered {
  text-align: center;
}
.tc-hero--centered .tc-hero__content {
  margin-inline: auto;
}
.tc-hero--centered .tc-hero__text {
  margin-inline: auto;
}
.tc-hero--centered .tc-hero__actions, .tc-hero--centered .tc-hero__proof {
  justify-content: center;
}
.tc-hero--split .tc-hero__inner {
  display: grid;
  gap: 56px;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .tc-hero--split .tc-hero__inner {
    grid-template-columns: 1fr 1.05fr;
  }
}
.tc-hero--split .tc-hero__inner .tc-hero__media {
  margin-top: 0;
}
.tc-hero--compact {
  padding-bottom: clamp(40px, 5vw, 64px);
}

/* ---- variants ---- */
/* ---------- Hero: prompt-first composition ---------- */
.tc-hero--prompt .tc-hero__content {
  max-width: 1000px;
}
.tc-hero--prompt .tc-hero__title {
  font-family: var(--tc-font-heading);
  font-size: clamp(38px, 24.6956521739px + 3.6956521739vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--tc-heading);
  margin-inline: auto;
}
.tc-hero--prompt .tc-hero__accent {
  display: block;
  font-size: 1.12em;
  line-height: 1;
  color: var(--tc-heading);
}
.tc-hero--prompt .tc-hero__text {
  max-width: 600px;
}
.tc-hero--prompt .tc-hero__glow {
  top: -300px;
  left: 50%;
  margin-left: -450px;
  width: 900px;
  height: 700px;
  max-width: none;
}
.tc-hero--prompt .tc-hero__glow--lime {
  top: 120px;
  left: auto;
  right: -60px;
  margin-left: 0;
  width: 520px;
  height: 520px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tc-primary) 16%, transparent), transparent);
}
.tc-hero--prompt .tc-bg-grid {
  mask-image: radial-gradient(ellipse 80% 55% at 50% 25%, var(--tc-black) 20%, transparent 75%);
}

/* Command / prompt box */
.tc-prompt {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.tc-prompt__box {
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 28px;
  background: linear-gradient(var(--tc-surface), var(--tc-surface)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--tc-primary) 70%, transparent), var(--tc-border) 38%, var(--tc-border) 62%, color-mix(in srgb, var(--tc-accent) 70%, transparent)) border-box;
  box-shadow: 0 30px 80px -34px var(--tc-glow), var(--tc-shadow);
}
.tc-prompt__field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 16px;
}
.tc-prompt__spark {
  flex-shrink: 0;
  color: var(--tc-accent);
  font-size: 18px;
}
.tc-prompt__input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: transparent;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--tc-heading);
}
.tc-prompt__input:focus {
  outline: none;
}
.tc-prompt__input::placeholder {
  color: var(--tc-muted);
}
.tc-prompt__send {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  cursor: pointer;
  transition: transform var(--tc-transition);
}
.tc-prompt__send:hover {
  transform: scale(1.08);
}
.tc-prompt__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 8px 2px 16px;
  border-top: 1px solid var(--tc-border);
}
.tc-prompt__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tc-prompt__tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: transparent;
  font-size: 13px;
  color: var(--tc-text);
  cursor: pointer;
  transition: color var(--tc-transition), border-color var(--tc-transition);
}
.tc-prompt__tool:hover {
  color: var(--tc-heading);
  border-color: var(--tc-muted);
}
.tc-prompt__tool i {
  color: var(--tc-muted);
}
.tc-prompt__model {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--tc-muted);
}
.tc-prompt__model::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tc-primary);
  box-shadow: 0 0 10px var(--tc-primary);
}
@media only screen and (max-width: 575px) {
  .tc-prompt__model {
    display: none;
  }
}
@media only screen and (max-width: 575px) {
  .tc-prompt__label {
    display: none;
  }
}
.tc-prompt__suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.tc-prompt__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: color-mix(in srgb, var(--tc-surface) 70%, transparent);
  font-size: 13.5px;
  color: var(--tc-text);
  transition: color var(--tc-transition), border-color var(--tc-transition), transform var(--tc-transition);
}
.tc-prompt__chip:hover {
  color: var(--tc-heading);
  border-color: var(--tc-primary);
  transform: translateY(-2px);
}
.tc-prompt__chip i {
  color: var(--tc-primary-bright);
  font-size: 12px;
}

/* Hero stage: assistant mockup with floating insight cards */
.tc-stage {
  position: relative;
  max-width: 860px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  text-align: left;
}
.tc-stage::before {
  content: "";
  position: absolute;
  inset: 8% 4% -6%;
  border-radius: var(--tc-radius-xl);
  background: radial-gradient(closest-side, var(--tc-glow), transparent);
  filter: blur(30px);
}
.tc-stage .tc-chart--bars {
  height: 84px;
  gap: 6px;
}
.tc-stage .tc-chart__bar:not(.tc-chart__bar--primary) {
  background: color-mix(in srgb, var(--tc-accent) 30%, transparent);
}
.tc-stage .tc-float-card--tl {
  top: 14%;
  left: -12%;
}
.tc-stage .tc-float-card--mr {
  top: 48%;
  right: -13%;
}
.tc-stage .tc-float-card--bl {
  bottom: -4%;
  left: -6%;
}

.tc-stage--side {
  max-width: none;
  margin: 0;
}
.tc-stage--side .tc-float-card--tr {
  top: 1%;
  right: -5%;
  left: auto;
}
.tc-stage--side .tc-float-card--br {
  bottom: -5%;
  right: -3%;
}

/* ---------- Hero: lime colour block + layered product UI ---------- */
.tc-launch {
  position: relative;
  overflow: hidden;
  padding: calc(var(--tc-header-height) + 56px) 0 56px;
  background: var(--tc-primary);
  color: color-mix(in srgb, var(--tc-on-primary) 80%, transparent);
}
@media only screen and (min-width: 992px) {
  .tc-launch {
    padding: calc(var(--tc-header-height) + 72px) 0 96px;
    background: linear-gradient(90deg, var(--tc-primary) 0 calc(50% + 120px), var(--tc-bg-soft) calc(50% + 120px) 100%);
  }
}
.tc-launch__inner {
  position: relative;
  z-index: var(--tc-z-base);
}
.tc-launch__content {
  max-width: 620px;
}
@media only screen and (min-width: 992px) {
  .tc-launch__content {
    max-width: min(580px, 50vw - 70px);
  }
}
.tc-launch__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 6px 16px 6px 6px;
  border: 2px solid var(--tc-ink);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-white);
  font-family: var(--tc-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--tc-ink);
}
.tc-launch__badge .tc-badge {
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
}
.tc-launch__title {
  margin-bottom: 24px;
  font-family: var(--tc-font-heading);
  font-size: clamp(50px, 6.6vw, 104px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.045em;
  word-spacing: 0.08em;
  color: var(--tc-on-primary);
}
.tc-launch__title-line {
  display: block;
}
.tc-launch__title-mark {
  position: relative;
  display: inline-block;
}
.tc-launch__title-mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.02em;
  height: 0.12em;
  border-radius: 99px;
  background: var(--tc-on-primary);
  transform: rotate(-1.2deg);
}
.tc-launch__text {
  max-width: 500px;
  margin-bottom: 32px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: color-mix(in srgb, var(--tc-on-primary) 80%, transparent);
}
.tc-launch__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.tc-launch__actions .tc-btn--primary {
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
}
.tc-launch__actions .tc-btn--primary:hover {
  background: var(--tc-ink);
  color: var(--tc-white);
}
.tc-launch__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 36px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tc-on-primary);
}
.tc-launch__proof .tc-avatar {
  border-color: var(--tc-primary);
}
.tc-launch__proof .tc-avatar-group__label {
  color: color-mix(in srgb, var(--tc-on-primary) 75%, transparent);
}
.tc-launch__proof .tc-avatar-group__label strong {
  color: var(--tc-on-primary);
}
.tc-launch {
  /* stage: absolute on desktop (bleeds off the right edge), stacked on mobile */
}
.tc-launch__stage {
  position: relative;
  height: 430px;
  margin-top: 48px;
}
@media only screen and (min-width: 576px) {
  .tc-launch__stage {
    height: 480px;
  }
}
.tc-launch__win {
  position: absolute;
  border-color: var(--tc-ink);
  border-width: 2px;
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--tc-ink) 90%, transparent);
}
.tc-launch__win--board {
  top: 0;
  left: 0;
  width: 92%;
  z-index: 2;
}
.tc-launch__win--stats {
  right: 0;
  bottom: 0;
  width: 66%;
  z-index: 3;
}
.tc-launch__win--week {
  display: none;
}
@media only screen and (min-width: 992px) {
  .tc-launch__stage {
    position: absolute;
    top: 50%;
    left: calc(50% + 40px);
    width: 940px;
    height: 600px;
    margin: 0;
    --tc-launch-scale: 0.7;
    transform: translateY(-50%) scale(var(--tc-launch-scale));
    transform-origin: left center;
  }
  .tc-launch__win--board {
    top: 80px;
    left: 0;
    width: 560px;
  }
  .tc-launch__win--week {
    display: block;
    top: 0;
    left: 400px;
    width: 540px;
    z-index: 1;
  }
  .tc-launch__win--stats {
    left: 120px;
    right: auto;
    bottom: 0;
    width: 380px;
  }
}
@media only screen and (min-width: 1201px) {
  .tc-launch__stage {
    --tc-launch-scale: 0.86;
  }
}
@media only screen and (min-width: 1400px) {
  .tc-launch__stage {
    --tc-launch-scale: 1;
  }
}

/* ---------- hero (left aligned, split) ---------- */
.tc-hero--dev {
  padding-bottom: clamp(64px, 8vw, 112px);
}
.tc-hero--dev::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--tc-border);
}
.tc-hero--dev .tc-hero__bg .tc-bg-grid {
  mask-image: radial-gradient(ellipse 80% 70% at 70% 35%, var(--tc-black) 20%, transparent 75%);
}
.tc-hero--dev .tc-hero__glow {
  top: -140px;
  right: -120px;
}
.tc-hero--dev .tc-hero__title {
  font-size: clamp(38px, 5.4vw, 66px);
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.tc-hero--dev .tc-hero__badge {
  padding: 5px 14px 5px 5px;
  border-radius: var(--tc-radius-sm);
  font-family: var(--tc-font-mono);
  font-size: 13px;
}
.tc-hero--dev .tc-hero__badge .tc-badge {
  border-radius: 5px;
}
@media only screen and (min-width: 992px) {
  .tc-hero--dev .tc-hero__inner {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 40px;
  }
}
.tc-hero--dev .tc-hero__media {
  min-width: 0;
}
.tc-hero--dev .tc-hero__proof {
  font-family: var(--tc-font-mono);
  font-size: 13px;
}
.tc-hero--dev .tc-hero__proof i {
  margin-right: 6px;
  color: var(--tc-link);
}
.tc-hero--dev .tc-btn {
  border-radius: var(--tc-radius);
}

.tc-install {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 460px;
  margin-bottom: 28px;
  padding: 14px 18px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-bg-soft);
  font-family: var(--tc-font-mono);
  font-size: 14px;
  color: var(--tc-heading);
  overflow-x: auto;
}
.tc-install__prompt {
  color: var(--tc-link);
  user-select: none;
}
.tc-install__cmd {
  flex: 1;
  white-space: nowrap;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.tc-install__pkg {
  color: var(--tc-accent-deep);
}
[data-theme=dark] .tc-install__pkg {
  color: var(--tc-accent);
}
.tc-install__hint {
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid var(--tc-border);
  border-radius: 5px;
  font-size: 12px;
  color: var(--tc-muted);
}

/* ---------- floating UI cluster ---------- */
.tc-cluster {
  position: relative;
  display: grid;
  gap: 16px;
  min-width: 0;
}
.tc-cluster__item {
  min-width: 0;
  box-shadow: var(--tc-shadow-lg);
}
.tc-cluster .tc-window, .tc-cluster .tc-panel {
  border-radius: var(--tc-radius);
}
.tc-cluster .tc-window__url {
  max-width: 220px;
  font-family: var(--tc-font-mono);
}
.tc-cluster .tc-panel {
  box-shadow: var(--tc-shadow-lg);
  font-size: 13px;
  line-height: 1.45;
}
@media only screen and (min-width: 768px) {
  .tc-cluster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tc-cluster__item--editor, .tc-cluster__item--latency {
    grid-column: 1/-1;
  }
}
@media only screen and (min-width: 992px) {
  .tc-cluster {
    display: block;
  }
  .tc-cluster__item--latency {
    grid-column: auto;
  }
  .tc-cluster {
    height: 640px;
  }
  .tc-cluster__item {
    position: absolute;
    animation: tc-float 7s ease-in-out infinite;
  }
  .tc-cluster__item--editor {
    top: 0;
    left: 0;
    width: 88%;
    animation: none;
  }
  .tc-cluster__item--status {
    top: 150px;
    right: 0;
    width: 40%;
    animation-delay: -2s;
    z-index: 4;
  }
  .tc-cluster__item--terminal {
    top: 372px;
    left: 0;
    width: 58%;
    animation: none;
    z-index: 2;
  }
  .tc-cluster__item--latency {
    bottom: 0;
    right: 0;
    width: 50%;
    animation-delay: -4s;
    z-index: 3;
  }
}

.tc-uptime__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.tc-uptime__value {
  font-family: var(--tc-font-mono);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--tc-heading);
}
.tc-uptime__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-success);
}
[data-theme=dark] .tc-uptime__live {
  color: var(--tc-success);
}
.tc-uptime__live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
}
.tc-uptime__bars {
  display: flex;
  gap: 2px;
  height: 26px;
  margin-bottom: 8px;
}
.tc-uptime__bar {
  flex: 1;
  border-radius: 2px;
  background: var(--tc-success);
  opacity: 0.85;
}
.tc-uptime__bar--warn {
  background: var(--tc-warning);
}
.tc-uptime__legend {
  display: flex;
  justify-content: space-between;
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--tc-muted);
}

.tc-metric {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--tc-font-mono);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--tc-heading);
}
.tc-metric small {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--tc-success);
}
[data-theme=dark] .tc-metric small {
  color: var(--tc-success);
}

/* Hero – oversized, quiet */
.tc-hero--minimal {
  padding-top: calc(var(--tc-header-height) + clamp(72px, 11vw, 160px));
  padding-bottom: clamp(64px, 9vw, 128px);
}
.tc-hero--minimal .tc-hero__content {
  max-width: 1120px;
}
.tc-hero--minimal .tc-hero__title {
  margin-bottom: clamp(24px, 3vw, 40px);
  font-size: clamp(46px, 10vw, 120px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.tc-hero--minimal .tc-hero__title .tc-text-serif {
  font-size: 1.1em;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.tc-hero--minimal .tc-hero__text {
  max-width: 400px;
  margin-bottom: 32px;
  font-size: 15px;
  color: var(--tc-muted);
}
.tc-hero--minimal .tc-hero__text .tc-text-serif {
  font-size: 1.2em;
  color: var(--tc-heading);
}
.tc-hero--minimal .tc-hero__media {
  max-width: 1160px;
  margin-inline: auto;
  margin-top: clamp(64px, 9vw, 128px);
}

/* Dotted canvas background (hero + final CTA band) ------------------------ */
.tc-bg-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--tc-border) 1.4px, transparent 1.4px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, var(--tc-black) 55%, transparent);
}

.tc-hero--canvas .tc-hero__content {
  max-width: 620px;
}
.tc-hero--canvas .tc-hero__title {
  font-size: clamp(38px, 5.4vw, 68px);
}
.tc-hero--canvas .tc-hero__glow {
  top: -20%;
  right: -10%;
  left: auto;
}

.tc-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  margin: 40px 0 0;
  padding: 24px 0 0;
  border-top: 1px dashed var(--tc-border);
  list-style: none;
}

.tc-hero-stats__item strong {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 28px;
  line-height: 1.1;
  color: var(--tc-heading);
}
.tc-hero-stats__item span {
  font-size: 14px;
}

/* Workflow canvas (hero) ---------------------------------------------------- */
.tc-flowboard {
  position: relative;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background-color: var(--tc-surface);
  background-image: radial-gradient(var(--tc-border) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  box-shadow: var(--tc-shadow-lg);
}
.tc-flowboard__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.tc-flowboard__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.tc-flowboard__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-flowboard__live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tc-success);
  animation: tc-pulse 1.8s infinite;
}
.tc-flowboard__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media only screen and (min-width: 768px) {
  .tc-flowboard__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
    grid-template-rows: auto 40px auto;
    align-items: stretch;
  }
}
.tc-flowboard .tc-node {
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
}
.tc-flowboard .tc-node__icon {
  width: 38px;
  height: 38px;
}
.tc-flowboard .tc-node__title {
  line-height: 1.3;
}
.tc-flowboard__tag {
  position: absolute;
  top: -9px;
  left: 12px;
  padding: 1px 8px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-primary-bright);
}
.tc-flowboard__cell {
  position: relative;
  display: flex;
  min-width: 0;
}
.tc-flowboard__cell > .tc-node {
  flex: 1;
}
.tc-flowboard__link {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  justify-self: center;
  width: 2px;
  height: 28px;
  margin-inline: auto;
  background: repeating-linear-gradient(var(--tc-muted) 0 4px, transparent 4px 8px);
}
.tc-flowboard__link::after {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tc-accent);
  animation: tc-flow-y 2.4s infinite linear;
}
@media only screen and (min-width: 768px) {
  .tc-flowboard__link--x {
    width: 100%;
    height: 2px;
    margin: 0;
    background: repeating-linear-gradient(90deg, var(--tc-muted) 0 4px, transparent 4px 8px);
  }
  .tc-flowboard__link--x::after {
    top: -3px;
    left: 0;
    animation-name: tc-flow-x;
    animation-duration: 2s;
  }
  .tc-flowboard__link--y {
    height: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .tc-flowboard__link--a-r {
    display: none;
  }
}
.tc-flowboard {
  /* desktop placement */
}
@media only screen and (min-width: 768px) {
  .tc-flowboard__cell--trigger {
    grid-area: 1/1;
  }
  .tc-flowboard__link--t-c {
    grid-area: 1/2;
  }
  .tc-flowboard__cell--condition {
    grid-area: 1/3;
  }
  .tc-flowboard__link--c-a {
    grid-area: 1/4;
  }
  .tc-flowboard__cell--yes {
    grid-area: 1/5;
  }
  .tc-flowboard__link--c-b {
    grid-area: 2/3;
  }
  .tc-flowboard__link--a-r {
    grid-area: 2/5;
  }
  .tc-flowboard__cell--else {
    grid-area: 3/3;
  }
  .tc-flowboard__link--b-r {
    grid-area: 3/4;
  }
  .tc-flowboard__cell--result {
    grid-area: 3/5;
  }
  .tc-flowboard__panel {
    grid-area: 3/1;
  }
}
.tc-flowboard__panel {
  display: none;
}
@media only screen and (min-width: 768px) {
  .tc-flowboard__panel {
    display: flex;
  }
}
.tc-flowboard .tc-node--result .tc-node__icon {
  background: var(--tc-primary);
  color: var(--tc-ink);
}
.tc-flowboard__runs {
  margin-top: 14px;
}
@media only screen and (min-width: 768px) {
  .tc-flowboard__runs {
    display: none;
  }
}

.tc-runs {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-sm);
}
.tc-runs__label {
  font-size: 12px;
  color: var(--tc-muted);
}
.tc-runs__value {
  font-family: var(--tc-font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--tc-heading);
}
.tc-runs__delta {
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-success);
}
.tc-runs__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
}
.tc-runs__bars span {
  flex: 1;
  height: var(--tc-value);
  border-radius: 3px;
  background: var(--tc-surface-2);
}
.tc-runs__bars span:nth-last-child(-n+3) {
  background: var(--tc-primary);
}

.tc-flowboard__runs .tc-runs {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.tc-flowboard__runs .tc-runs > div:first-child {
  flex: 1;
  min-width: 120px;
}
.tc-flowboard__runs .tc-runs .tc-runs__bars {
  flex: 1;
  min-width: 100px;
}

@keyframes tc-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 143, 76, 0.5);
  }
  70%, 100% {
    box-shadow: 0 0 0 7px rgba(26, 143, 76, 0);
  }
}
/* Hero */
.tc-hero--business {
  padding: calc(var(--tc-header-height) + clamp(32px, 4vw, 56px)) 0 clamp(48px, 6vw, 80px);
}
.tc-hero--business .tc-hero__wash {
  display: none;
}
@media only screen and (min-width: 992px) {
  .tc-hero--business .tc-hero__wash {
    display: block;
    position: absolute;
    inset: 0 0 0 auto;
    width: 42%;
    background: var(--tc-bg-soft);
  }
}
.tc-hero--business .tc-hero__title {
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.tc-hero--business .tc-hero__title .tc-text-serif {
  font-size: 1.08em;
  color: var(--tc-accent-deep);
}
.tc-hero--business .tc-hero__text {
  max-width: 540px;
}
.tc-hero--business .tc-hero__proof {
  margin-top: 36px;
}
@media only screen and (min-width: 992px) {
  .tc-hero--business.tc-hero--split .tc-hero__inner {
    grid-template-columns: 1.02fr 1fr;
    gap: 64px;
  }
}

/* Hero photo collage */
.tc-collage__main, .tc-collage__small {
  display: block;
}
.tc-collage__main {
  aspect-ratio: 4/3;
}
.tc-collage__main .tc-media__img {
  object-position: 100% 50%;
}
.tc-collage__small {
  display: none;
}
.tc-collage__small .tc-media__img {
  object-position: 70% 50%;
}
.tc-collage__panel {
  position: relative;
  z-index: 2;
  margin: -56px 16px 0;
  box-shadow: var(--tc-shadow);
}
.tc-collage .tc-chart__bar {
  background: var(--tc-primary);
}
.tc-collage .tc-chart__bar--dark {
  background: var(--tc-ink);
}
.tc-collage__figure {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.tc-collage__value {
  font-family: var(--tc-font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tc-heading);
}
.tc-collage .tc-float-card--tl {
  top: 5%;
  left: 4%;
}
@media only screen and (min-width: 992px) {
  .tc-collage {
    aspect-ratio: 1/1.06;
  }
  .tc-collage__main {
    position: absolute;
    top: 0;
    right: 0;
    width: 66%;
    height: 82%;
    aspect-ratio: auto;
  }
  .tc-collage__small {
    display: block;
    position: absolute;
    z-index: 2;
    top: 30%;
    left: 0;
    width: 40%;
    height: 32%;
    border: 6px solid var(--tc-bg);
    border-radius: var(--tc-radius-xl);
    box-shadow: var(--tc-shadow);
  }
  .tc-collage__panel {
    position: absolute;
    left: 10%;
    bottom: 0;
    width: 76%;
    margin: 0;
  }
}

/* Hero: copy left (5 cols), dense board right (7 cols) */
.tc-hero--board .tc-hero__inner {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media only screen and (min-width: 1201px) {
  .tc-hero--board .tc-hero__inner {
    grid-template-columns: 5fr 7fr;
    gap: 40px;
    align-items: start;
  }
}
@media only screen and (min-width: 1201px) {
  .tc-hero--board .tc-hero__content {
    padding-top: clamp(24px, 6vw, 96px);
  }
}
.tc-hero--board .tc-hero__title {
  font-family: var(--tc-font-heading);
  font-size: clamp(38px, 30.9565217391px + 1.9565217391vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--tc-heading);
}
.tc-hero--board .tc-hero__text {
  max-width: 480px;
}
.tc-hero--board .tc-hero__media {
  margin-top: 0;
  min-width: 0;
}
.tc-hero--board .tc-hero__proof {
  gap: 12px 24px;
}
.tc-hero--board .tc-window {
  box-shadow: var(--tc-shadow-lg);
}
.tc-hero--board .tc-window--tilt {
  transform: none;
}

/* Delta badge reused from the old board mockup */
.tc-board__delta {
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-success);
}
.tc-board__delta--down {
  color: var(--tc-danger);
}

/* =========================================================
   Hero – stacked display type + rotated product pieces
   ========================================================= */
.tc-poster {
  padding-top: calc(var(--tc-header-height) + clamp(20px, 2.6vw, 44px));
  padding-bottom: 0;
}
.tc-poster__blob {
  position: absolute;
  top: 6%;
  right: -12%;
  width: clamp(320px, 52vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tc-primary);
  opacity: 0.9;
}
.tc-poster__ring {
  position: absolute;
  top: 38%;
  left: -8%;
  width: clamp(160px, 24vw, 340px);
  aspect-ratio: 1;
  border: 2px dashed var(--tc-border);
  border-radius: 50%;
}
.tc-poster__grid {
  position: relative;
  display: grid;
  gap: 28px 24px;
  padding-bottom: clamp(48px, 7vw, 96px);
}
@media only screen and (min-width: 992px) {
  .tc-poster__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
.tc-poster__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--tc-font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tc-heading);
}
.tc-poster__kicker::before {
  content: "";
  width: 48px;
  height: 2px;
  background: var(--tc-heading);
}
@media only screen and (min-width: 992px) {
  .tc-poster__kicker {
    grid-column: 1/-1;
  }
}
.tc-poster__title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(54px, 11.4vw, 160px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.05em;
}
@media only screen and (min-width: 992px) {
  .tc-poster__title {
    grid-column: 1/10;
    grid-row: 2;
  }
}
.tc-poster__title .tc-text-serif {
  font-weight: 400;
  letter-spacing: -0.03em;
  font-size: 1.06em;
}
.tc-poster__line {
  display: block;
}
.tc-poster__line--indent {
  padding-left: 0.5em;
}
.tc-poster__chip {
  display: inline-block;
  width: 1.6em;
  height: 0.72em;
  margin: 0 0.06em;
  border-radius: 999px;
  object-fit: cover;
  vertical-align: baseline;
  transform: translateY(0.02em) rotate(-4deg);
}
.tc-poster__aside {
  max-width: 520px;
}
@media only screen and (min-width: 992px) {
  .tc-poster__aside {
    grid-column: 1/7;
    grid-row: 3;
    margin-top: 12px;
  }
}
.tc-poster__aside .tc-hero__text {
  margin-bottom: 28px;
}
.tc-poster__stage {
  position: relative;
  min-height: 360px;
  margin-top: 12px;
}
@media only screen and (min-width: 992px) {
  .tc-poster__stage {
    grid-column: 8/13;
    grid-row: 2/4;
    min-height: 0;
    margin-top: 150px;
  }
}
.tc-poster__piece {
  position: relative;
  --tc-rot: 0deg;
  rotate: var(--tc-rot);
}
.tc-poster__piece--main {
  --tc-rot: 3deg;
  max-width: 560px;
  margin-left: auto;
}
.tc-poster__piece--side {
  display: none;
  position: absolute;
  z-index: 3;
  bottom: -64px;
  left: -72px;
  width: 260px;
  --tc-rot: -7deg;
}
@media only screen and (min-width: 992px) {
  .tc-poster__piece--side {
    display: block;
  }
}
.tc-poster__chip-card {
  --tc-rot: 0deg;
  rotate: var(--tc-rot);
  animation: tc-bob 6s ease-in-out infinite;
}
.tc-poster__chip-card--a {
  top: -28px;
  left: -10px;
  --tc-rot: -6deg;
}
.tc-poster__chip-card--b {
  top: 46%;
  right: -34px;
  --tc-rot: 5deg;
  animation-delay: -2s;
}
.tc-poster .tc-window {
  box-shadow: var(--tc-shadow-lg);
}

@keyframes tc-bob {
  50% {
    transform: translateY(-10px);
  }
}
/* Spinning circular text badge (CSS only) */
.tc-spin {
  position: absolute;
  z-index: 4;
  display: none;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
}
@media only screen and (min-width: 992px) {
  .tc-spin {
    display: block;
    top: 56%;
    left: 55%;
  }
}
.tc-spin {
  /* ring text: one span per character, each rotated by --i steps and pushed out to the rim (no SVG path, no ids) */
}
.tc-spin__ring {
  position: absolute;
  inset: 0;
  animation: tc-spin 18s linear infinite;
  font-family: var(--tc-font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.tc-spin__ring > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1ch;
  margin: -0.5em 0 0 -0.5ch;
  text-align: center;
  line-height: 1;
  transform: rotate(calc(var(--i) * 360deg / 38)) translateY(-56px);
}
.tc-spin__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  font-size: 26px;
  transition: transform var(--tc-transition);
}
.tc-spin:hover .tc-spin__icon {
  transform: translateY(4px);
}

@keyframes tc-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Marquee strip of keywords – reuses tc-logo-list--marquee */
.tc-ticker {
  position: relative;
  z-index: 3;
  width: 104%;
  margin: 0 -2% 0;
  padding: clamp(14px, 2vw, 22px) 0;
  background: var(--tc-ink);
  rotate: -1.6deg;
}
.tc-ticker .tc-logo-list__viewport {
  mask-image: none;
  -webkit-mask-image: none;
}
.tc-ticker .tc-logo-list--marquee {
  animation-duration: 40s;
}
.tc-ticker .tc-logo-list__item {
  gap: 28px;
  font-size: clamp(26px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--tc-white);
  opacity: 1;
}
.tc-ticker .tc-logo-list__item i {
  font-size: 0.6em;
  color: var(--tc-primary-bright);
}
.tc-ticker .tc-logo-list__item:nth-child(even) {
  font-family: var(--tc-font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--tc-primary-bright);
}
.tc-ticker .tc-logo-list__item:nth-child(even) i {
  color: var(--tc-white);
}
.tc-ticker--flat {
  rotate: none;
}

@media (prefers-reduced-motion: reduce) {
  .tc-spin__ring, .tc-poster__chip-card {
    animation: none;
  }
}
/* ---------- Hero ---------- */
.tc-hero--enterprise {
  color: var(--tc-text); /* re-resolve text colour inside the data-theme="dark" panel */
}
@media only screen and (min-width: 992px) {
  .tc-hero--enterprise .tc-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(40px, 5vw, 80px);
  }
}
.tc-hero--enterprise .tc-hero__media {
  min-width: 0;
}
.tc-hero--enterprise .tc-hero__title {
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.07;
  letter-spacing: -0.035em;
}
.tc-hero--enterprise .tc-text-serif {
  font-size: 1.1em;
  color: var(--tc-primary-bright);
}
.tc-hero--enterprise .tc-hero__text {
  max-width: 520px;
}
.tc-hero--enterprise .tc-hero__glow {
  top: -240px;
  right: -160px;
}
.tc-hero--enterprise .tc-hero__badge .tc-badge--outline {
  border-color: var(--tc-border);
  color: var(--tc-heading);
}
.tc-hero--enterprise .tc-hero__badge {
  margin-bottom: 28px;
}

.tc-hero__trust {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--tc-border);
}
.tc-hero__trust-label {
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-muted);
}

/* ---------- Hero composition: layered control plane ---------- */
.tc-console {
  position: relative;
}
@media only screen and (min-width: 992px) {
  .tc-console {
    padding-bottom: 215px;
  }
}
.tc-console__window {
  box-shadow: var(--tc-shadow-lg);
}
.tc-console__matrix {
  margin-top: 16px;
  box-shadow: var(--tc-shadow-lg);
}
@media only screen and (min-width: 992px) {
  .tc-console__matrix {
    position: absolute;
    right: -24px;
    bottom: 0;
    z-index: 3;
    width: 330px;
    margin-top: 0;
  }
}
.tc-console .tc-float-card--bl {
  top: auto;
  bottom: 36px;
  left: 8px;
}

.tc-matrix__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: center;
}
.tc-matrix th, .tc-matrix td {
  padding: 7px 4px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-matrix thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-matrix tbody th {
  text-align: left;
  font-family: var(--tc-font-heading);
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-matrix tbody tr:last-child > * {
  border-bottom: 0;
}
.tc-matrix td i {
  font-size: 12px;
  color: var(--tc-link);
}
.tc-matrix td .fa-minus {
  color: var(--tc-muted);
  opacity: 0.6;
}

/* mock-up panel titles are <p> elements: keep them heading-coloured */
.tc-console .tc-panel__title, .tc-pillars .tc-panel__title, .tc-numbered__visual .tc-panel__title {
  color: var(--tc-heading);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.3 Inner page hero (title + breadcrumb)
/*  .tc-page-hero  --left --compact
/*----------------------------------------*/
.tc-page-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--tc-header-height) + clamp(40px, 6vw, 72px)) 0 clamp(48px, 6vw, 80px);
  background: var(--tc-bg-soft);
  text-align: center;
}
.tc-page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* colour mesh (primary + accent glows) and the fine grid, faded out towards the edges */
}
.tc-page-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 90% at 88% 0%, color-mix(in srgb, var(--tc-primary) var(--tc-wash-a, 26%), transparent), transparent 70%), radial-gradient(ellipse 45% 80% at 6% 100%, color-mix(in srgb, var(--tc-accent) var(--tc-wash-b, 16%), transparent), transparent 70%);
}
@media only screen and (max-width: 767px) {
  .tc-page-hero__bg::before {
    background: radial-gradient(ellipse 90% 60% at 90% 0%, color-mix(in srgb, var(--tc-primary) var(--tc-wash-a, 26%), transparent), transparent 70%), radial-gradient(ellipse 80% 50% at 0% 100%, color-mix(in srgb, var(--tc-accent) var(--tc-wash-b, 16%), transparent), transparent 70%);
  }
}
.tc-page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--tc-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--tc-grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 90% at 50% 50%, var(--tc-black) 15%, transparent 75%);
}
.tc-page-hero__glow {
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
}
.tc-page-hero__inner {
  position: relative;
  z-index: var(--tc-z-base);
}
.tc-page-hero__title {
  font-family: var(--tc-font-heading);
  font-size: clamp(36px, 26.6086956522px + 2.6086956522vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--tc-heading);
  max-width: 860px;
  margin: 0 auto 16px;
}
.tc-page-hero__text {
  max-width: 640px;
  margin: 0 auto;
  font-size: clamp(16px, 1.5vw, 19px);
}
.tc-page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--tc-muted);
}
.tc-page-hero--left {
  text-align: left;
}
.tc-page-hero--left .tc-breadcrumb__list {
  justify-content: flex-start;
}
.tc-page-hero--left .tc-page-hero__title, .tc-page-hero--left .tc-page-hero__text {
  margin-inline: 0;
}
.tc-page-hero--left .tc-page-hero__meta {
  justify-content: flex-start;
}
.tc-page-hero--compact {
  padding-bottom: clamp(32px, 4vw, 56px);
}

/* ---- variants ---- */
/* ---------- blog details ---------- */
.tc-page-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.4 Product showcase, dashboards, architecture and capability sections
/*----------------------------------------*/
/* ---------- architecture diagram ---------- */
.tc-arch {
  position: relative;
  display: grid;
  gap: 0;
  align-items: center;
  padding: clamp(20px, 3.5vw, 48px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background-color: var(--tc-bg-soft);
  background-image: linear-gradient(var(--tc-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--tc-grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}
@media only screen and (min-width: 992px) {
  .tc-arch {
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.3fr) 72px minmax(0, 1fr);
  }
}
.tc-arch__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.tc-arch__label {
  margin: 0 0 4px;
  font-family: var(--tc-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-arch__link {
  position: relative;
  width: 2px;
  height: 44px;
  margin-inline: auto;
  background: repeating-linear-gradient(var(--tc-muted) 0 4px, transparent 4px 8px);
}
@media only screen and (min-width: 992px) {
  .tc-arch__link {
    width: auto;
    height: 2px;
    margin: 0;
    background: repeating-linear-gradient(90deg, var(--tc-muted) 0 4px, transparent 4px 8px);
  }
}
.tc-arch__link::after {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tc-primary);
  animation: tc-flow-y 2.4s infinite linear;
}
@media only screen and (min-width: 992px) {
  .tc-arch__link::after {
    top: -3px;
    left: 0;
    animation-name: tc-flow-x;
  }
}
.tc-arch__core {
  overflow: hidden;
  border: 1px solid var(--tc-primary);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}
.tc-arch__core-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--tc-border);
  font-family: var(--tc-font-heading);
  font-weight: 700;
  color: var(--tc-heading);
}
.tc-arch__core-tag {
  font-family: var(--tc-font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--tc-link);
}
.tc-arch__layer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-arch__layer:last-child {
  border-bottom: 0;
}
.tc-arch__layer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-bg-soft);
  color: var(--tc-accent);
}
.tc-arch__layer-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-arch__layer-meta {
  display: block;
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-arch__layer-status {
  margin-left: auto;
  font-family: var(--tc-font-mono);
  font-size: 12px;
  color: var(--tc-muted);
}
@media only screen and (max-width: 767px) {
  .tc-arch__layer-status {
    display: none;
  }
}

.tc-arch .tc-node {
  padding: 12px 16px;
  box-shadow: none;
  background: var(--tc-surface);
}
.tc-arch .tc-node__icon {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

/* Reports: tabbed chart mocks */
.tc-report {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
@media only screen and (min-width: 992px) {
  .tc-report {
    grid-template-columns: 2fr 1fr;
  }
}
.tc-report .tc-panel {
  padding: 24px;
  min-width: 0;
}
.tc-report .tc-panel__title {
  font-size: 16px;
}
.tc-report__side {
  display: grid;
  gap: 16px;
  align-content: start;
}
.tc-report__big {
  font-family: var(--tc-font-heading);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--tc-heading);
}
.tc-report__note {
  margin: 8px 0 0;
  font-size: 14px;
}
.tc-report__scroll {
  overflow-x: auto;
}
.tc-report__scroll .tc-heat {
  min-width: 420px;
}
@media only screen and (min-width: 992px) {
  .tc-report--even {
    grid-template-columns: 1fr 1fr;
  }
}

/* Chart type gallery cards */
.tc-chart-card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: transform var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-chart-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tc-shadow);
}
.tc-chart-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 168px;
  padding: 24px;
  background: var(--tc-bg-soft);
  border-bottom: 1px solid var(--tc-border);
}
.tc-chart-card__preview > * {
  width: 100%;
}
.tc-chart-card__body {
  padding: 24px;
}
.tc-chart-card__title {
  margin-bottom: 8px;
  font-size: 18px;
}
.tc-chart-card__text {
  margin: 0 0 14px;
  font-size: 15px;
}
.tc-chart-card__use {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-chart-card__use i {
  color: var(--tc-accent-deep);
}
.tc-chart-card__preview .tc-donut {
  width: 104px;
  height: 104px;
  margin-inline: auto;
}
.tc-chart-card__preview .tc-donut::before {
  inset: 14px;
}
.tc-chart-card__preview .tc-spark {
  max-width: none;
  height: 64px;
}
.tc-chart-card__preview .tc-chart--bars {
  height: 110px;
}
.tc-chart-card__preview .tc-stack {
  --tc-height: 110px;
}

/* =========================================================
   Product fan – mockups at angles
   ========================================================= */
.tc-fan {
  position: relative;
  display: grid;
  gap: 28px;
  padding-block: 24px 8px;
}
@media only screen and (min-width: 992px) {
  .tc-fan {
    display: block;
    min-height: 640px;
    padding: 0;
  }
}
.tc-fan__piece {
  position: relative;
  min-width: 0;
  --tc-rot: 0deg;
}
@media only screen and (min-width: 992px) {
  .tc-fan__piece {
    position: absolute;
    rotate: var(--tc-rot);
    transition: rotate var(--tc-transition), transform var(--tc-transition);
  }
  .tc-fan__piece:hover {
    rotate: 0deg;
    transform: scale(1.02);
    z-index: 8;
  }
}
@media only screen and (min-width: 992px) {
  .tc-fan__piece--main {
    top: 24px;
    left: 14%;
    width: 66%;
    --tc-rot: -3deg;
    z-index: 3;
  }
}
@media only screen and (min-width: 992px) {
  .tc-fan__piece--phone {
    top: 150px;
    left: 0;
    width: 250px;
    --tc-rot: 7deg;
    z-index: 5;
  }
}
@media only screen and (min-width: 992px) {
  .tc-fan__piece--side {
    top: 0;
    right: 0;
    width: 330px;
    --tc-rot: 5deg;
    z-index: 4;
  }
}
@media only screen and (min-width: 992px) {
  .tc-fan__piece--tasks {
    bottom: 0;
    right: 4%;
    width: 320px;
    --tc-rot: -5deg;
    z-index: 6;
  }
}
.tc-fan .tc-window {
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.7);
}

.tc-handset {
  max-width: 260px;
  margin-inline: auto;
  padding: 10px;
  border: 1px solid var(--tc-border);
  border-radius: 38px;
  background: var(--tc-surface);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.7);
}
.tc-handset__screen {
  overflow: hidden;
  padding: 20px 16px 18px;
  border-radius: 30px;
  background: var(--tc-bg-soft);
  font-size: 13px;
  line-height: 1.4;
  color: var(--tc-text);
}
.tc-handset__notch {
  display: block;
  width: 72px;
  height: 18px;
  margin: -6px auto 16px;
  border-radius: 99px;
  background: var(--tc-ink);
  border: 1px solid var(--tc-border);
}
.tc-handset__title {
  display: block;
  margin-bottom: 4px;
  font-family: var(--tc-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--tc-heading);
}
.tc-handset__sub {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--tc-muted);
}
.tc-handset__card {
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 18px;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-handset__card strong {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 30px;
  line-height: 1;
}
.tc-handset__card span {
  font-size: 12px;
}

.tc-notes {
  display: grid;
  gap: 24px;
  margin-top: clamp(40px, 6vw, 72px);
}
@media only screen and (min-width: 768px) {
  .tc-notes {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}
.tc-notes__item {
  padding-top: 20px;
  border-top: 1px solid var(--tc-border);
}
.tc-notes__item h3 {
  margin-bottom: 8px;
  font-size: 22px;
}
.tc-notes__item p {
  margin: 0;
}
.tc-notes__num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--tc-font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--tc-primary-bright);
}

/* ---------- Platform pillars ---------- */
.tc-pillars .tc-dashboard__grid {
  grid-template-columns: minmax(0, 1fr);
}
.tc-pillars .tc-tabs__list {
  display: flex;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--tc-radius);
}
@media only screen and (min-width: 768px) {
  .tc-pillars .tc-tabs__list {
    display: inline-flex;
  }
}
.tc-pillars .tc-tabs__tab {
  flex-shrink: 0;
  border-radius: var(--tc-radius-sm);
  white-space: nowrap;
}
.tc-pillars .tc-tabs__tab.is-active {
  background: var(--tc-ink);
  color: var(--tc-white);
}

.tc-pillar__index {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-link);
}
.tc-pillar__title {
  font-family: var(--tc-font-heading);
  font-size: clamp(24px, 20.0869565217px + 1.0869565217vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--tc-heading);
  margin-bottom: 16px;
}
.tc-pillar__workflow {
  padding: 20px;
}
.tc-pillar__workflow .tc-node {
  padding: 12px;
  gap: 10px;
}
.tc-pillar__workflow .tc-node__icon {
  width: 34px;
  height: 34px;
  font-size: 14px;
}
.tc-pillar__workflow .tc-node__title {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.3;
}
@media only screen and (min-width: 992px) {
  .tc-pillar__workflow .tc-workflow__connector {
    width: 28px;
  }
}

/* ---- Showcase rows (features) ---- */
.tc-showcase {
  padding-block: clamp(28px, 5vw, 56px);
}
.tc-showcase + .tc-showcase {
  border-top: 1px solid var(--tc-border);
}
.tc-showcase__index {
  display: block;
  margin-bottom: 8px;
  font-family: var(--tc-font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--tc-muted);
}
.tc-showcase__title {
  font-family: var(--tc-font-heading);
  font-size: clamp(26px, 21.3043478261px + 1.3043478261vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--tc-heading);
  margin: 6px 0 14px;
}
.tc-showcase__stage {
  padding: clamp(14px, 3vw, 28px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-bg);
  background-image: radial-gradient(var(--tc-border) 1.1px, transparent 1.1px);
  background-size: 20px 20px;
}
.tc-showcase__stage .tc-window, .tc-showcase__stage .tc-workflow {
  box-shadow: var(--tc-shadow);
}
.tc-showcase__stage--flat {
  margin-top: 32px;
  padding: 0;
  border: 0;
  background: none;
}

/* vertical variant of the workflow diagram (narrow containers) */
.tc-workflow--stack {
  padding: 18px;
}
.tc-workflow--stack .tc-workflow__lane {
  flex-direction: column;
  align-items: stretch;
}
.tc-workflow--stack .tc-workflow__connector {
  width: 2px;
  height: 28px;
  margin: 0 auto;
  background: repeating-linear-gradient(var(--tc-muted) 0 4px, transparent 4px 8px);
}
.tc-workflow--stack .tc-workflow__connector::after {
  top: 0;
  left: -3px;
  animation-name: tc-flow-y;
}

/* ---- Platform capability panels ---- */
.tc-capability {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
}
@media only screen and (min-width: 992px) {
  .tc-capability {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
  }
}
.tc-capability__title {
  margin: 0 0 8px;
  font-size: 24px;
}
.tc-capability__list {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.tc-capability__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.tc-capability__item i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--tc-surface-2);
  color: var(--tc-heading);
}
.tc-capability__item strong {
  display: block;
  color: var(--tc-heading);
}
.tc-capability__item span {
  font-size: 15px;
}
.tc-capability__visual {
  min-width: 0;
  padding: 22px;
  border-radius: var(--tc-radius-lg);
  background: var(--tc-bg-soft);
}

/* ---- Before / after ---- */
.tc-shift {
  display: grid;
  gap: 20px;
}
@media only screen and (min-width: 768px) {
  .tc-shift {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}
.tc-shift__col {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
}
.tc-shift__col--after {
  background: var(--tc-inverse-bg);
  border-color: var(--tc-inverse-border);
  color: rgba(255, 255, 255, 0.72);
}
.tc-shift__col--after .tc-shift__title {
  color: var(--tc-white);
}
.tc-shift__col--after .tc-shift__label {
  color: var(--tc-primary);
  background: color-mix(in srgb, var(--tc-primary) 14%, transparent);
}
.tc-shift__col--after .tc-shift__item i {
  background: var(--tc-primary);
  color: var(--tc-ink);
}
.tc-shift__col--after .tc-shift__item {
  border-color: rgba(255, 255, 255, 0.12);
}
.tc-shift__label {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 12px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-shift__title {
  margin: 0 0 18px;
  font-size: clamp(20px, 2.4vw, 26px);
}
.tc-shift__list {
  margin: 0;
  padding: 0;
}
.tc-shift__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 0;
  border-top: 1px solid var(--tc-border);
}
.tc-shift__item i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--tc-surface-2);
  color: var(--tc-heading);
  font-size: 12px;
}
.tc-shift__col--before .tc-shift__item i {
  background: rgba(212, 69, 46, 0.14);
  color: var(--tc-danger);
}
.tc-shift--balanced .tc-shift__col:first-child .tc-shift__item i {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}

/* ---- Security strip ---- */
.tc-assure {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
}
@media only screen and (min-width: 1201px) {
  .tc-assure {
    grid-template-columns: 0.9fr 1.7fr;
    gap: 40px;
  }
}
.tc-assure__heading {
  font-family: var(--tc-font-heading);
  font-size: clamp(22px, 19.652173913px + 0.652173913vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--tc-heading);
  margin: 6px 0 0;
}
.tc-assure__list {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media only screen and (min-width: 992px) {
  .tc-assure__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tc-assure__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-assure__title {
  margin: 0 0 4px;
  font-size: 16px;
}
.tc-assure__text {
  margin: 0;
  font-size: 14px;
}

/* ---- Sub-feature + scenario cards ---- */
.tc-subfeature {
  display: flex;
  gap: 16px;
  height: 100%;
  padding: 22px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  transition: transform var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-subfeature:hover {
  transform: translateY(-3px);
  box-shadow: var(--tc-shadow);
}
.tc-subfeature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-subfeature__title {
  margin: 0 0 4px;
  font-size: 16px;
}
.tc-subfeature__text {
  margin: 0;
  font-size: 14px;
}
.tc-subfeature--stacked {
  flex-direction: column;
}

/* ---- Spec table ---- */
.tc-spec {
  overflow-x: auto;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}
.tc-spec__table {
  width: 100%;
  border-collapse: collapse;
}
.tc-spec__table th, .tc-spec__table td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--tc-border);
  text-align: left;
  vertical-align: top;
}
.tc-spec__table tr:last-child > * {
  border-bottom: 0;
}
.tc-spec__table th {
  width: 34%;
  font-weight: 600;
  color: var(--tc-heading);
  background: var(--tc-bg-soft);
}
.tc-spec__table td {
  color: var(--tc-text);
}

@media only screen and (min-width: 992px) {
  .tc-sticky-head {
    position: sticky;
    top: 110px;
  }
}

/* bars inside mockups: more contrast than the neutral default */
.tc-showcase .tc-chart__bar:not(.tc-chart__bar--primary), .tc-capability .tc-chart__bar:not(.tc-chart__bar--primary), .tc-custom-banner .tc-chart__bar:not(.tc-chart__bar--primary) {
  background: color-mix(in srgb, var(--tc-ink) 16%, transparent);
}

[data-theme=dark] .tc-showcase .tc-chart__bar:not(.tc-chart__bar--primary), [data-theme=dark] .tc-capability .tc-chart__bar:not(.tc-chart__bar--primary) {
  background: rgba(255, 255, 255, 0.2);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.5 Integrations: orbit, hub, catalog, connectors and API
/*----------------------------------------*/
/* ---------- Integration orbit ---------- */
.tc-orbit {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1;
  overflow: hidden;
  margin-inline: auto;
}
.tc-orbit__ring {
  position: absolute;
  border: 1px dashed var(--tc-border);
  border-radius: 50%;
  animation: tc-orbit-spin var(--tc-orbit-speed, 60s) linear infinite;
}
.tc-orbit__ring--outer {
  --tc-orbit-speed: 80s;
  inset: 8%;
}
.tc-orbit__ring--outer .tc-orbit__node:nth-child(1) {
  left: 93.3012701892%;
  top: 25%;
}
.tc-orbit__ring--outer .tc-orbit__node:nth-child(2) {
  left: 93.3012701892%;
  top: 75%;
}
.tc-orbit__ring--outer .tc-orbit__node:nth-child(3) {
  left: 50%;
  top: 100%;
}
.tc-orbit__ring--outer .tc-orbit__node:nth-child(4) {
  left: 6.6987298108%;
  top: 75%;
}
.tc-orbit__ring--outer .tc-orbit__node:nth-child(5) {
  left: 6.6987298108%;
  top: 25%;
}
.tc-orbit__ring--outer .tc-orbit__node:nth-child(6) {
  left: 50%;
  top: 0%;
}
.tc-orbit__ring--inner {
  --tc-orbit-speed: 50s;
  inset: 30%;
  border-style: solid;
}
.tc-orbit__ring--inner .tc-orbit__node:nth-child(1) {
  left: 50%;
  top: 100%;
}
.tc-orbit__ring--inner .tc-orbit__node:nth-child(2) {
  left: 6.6987298108%;
  top: 25%;
}
.tc-orbit__ring--inner .tc-orbit__node:nth-child(3) {
  left: 93.3012701892%;
  top: 25%;
}
.tc-orbit__node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border: 1px solid var(--tc-border);
  border-radius: 16px;
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-sm);
  font-size: 24px;
  color: var(--tc-heading);
  animation: tc-orbit-spin var(--tc-orbit-speed, 60s) linear infinite reverse;
}
@media only screen and (max-width: 575px) {
  .tc-orbit__node {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    font-size: 20px;
    border-radius: 12px;
  }
}
.tc-orbit__core {
  position: absolute;
  inset: 50% auto auto 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: clamp(22px, 4vw, 34px);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--tc-primary) 12%, transparent), 0 0 80px 10px var(--tc-glow);
}
.tc-orbit__glow {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tc-glow), transparent);
  pointer-events: none;
}

@keyframes tc-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tc-orbit__ring, .tc-orbit__node {
    animation: none;
  }
}
/* Hub section --------------------------------------------------------------- */
.tc-hub-section {
  position: relative;
  overflow: hidden;
}
.tc-hub-section .tc-bg-dots {
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, var(--tc-black) 20%, transparent 75%);
}
.tc-hub-section .container {
  position: relative;
}

.tc-hub-section__foot {
  margin-top: 40px;
  text-align: center;
}

/* Integrations list */
.tc-app-list {
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-sm);
}
.tc-app-list__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--tc-border);
  transition: background var(--tc-transition);
}
.tc-app-list__row:last-child {
  border-bottom: 0;
}
.tc-app-list__row:hover {
  background: var(--tc-bg-soft);
}
@media only screen and (min-width: 768px) {
  .tc-app-list__row {
    grid-template-columns: 44px minmax(0, 1fr) 132px 84px;
    padding-inline: 24px;
  }
}
.tc-app-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row: 1/span 2;
  width: 44px;
  height: 44px;
  border-radius: var(--tc-radius);
  background: var(--tc-surface-2);
  font-size: 20px;
  color: var(--tc-heading);
}
@media only screen and (min-width: 576px) {
  .tc-app-list__icon {
    grid-row: auto;
  }
}
.tc-app-list__main {
  min-width: 0;
  line-height: 1.4;
}
.tc-app-list__main strong {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 16px;
  color: var(--tc-heading);
}
.tc-app-list__main span {
  font-size: 14px;
  color: var(--tc-text);
}
.tc-app-list__chip {
  grid-column: 2;
  justify-self: start;
}
@media only screen and (min-width: 576px) {
  .tc-app-list__chip {
    grid-column: auto;
    justify-self: end;
  }
}
@media only screen and (min-width: 768px) {
  .tc-app-list__chip {
    justify-self: start;
  }
}
.tc-app-list__status {
  display: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--tc-success);
}
.tc-app-list__status i {
  margin-right: 4px;
}
@media only screen and (min-width: 768px) {
  .tc-app-list__status {
    display: block;
    justify-self: end;
  }
}

/* Data sources: grouped chips */
.tc-source {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  height: 100%;
  padding: 28px;
}
.tc-source__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.tc-source__title {
  margin: 0;
  font-size: 18px;
}
.tc-source__count {
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-source__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tc-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-bg-soft);
  font-size: 14px;
  font-weight: 500;
  color: var(--tc-heading);
  transition: border-color var(--tc-transition), background var(--tc-transition);
}
.tc-chip:hover {
  border-color: var(--tc-ink);
  background: var(--tc-surface);
}
.tc-chip i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tc-surface);
  color: var(--tc-heading);
  font-size: 13px;
  box-shadow: inset 0 0 0 1px var(--tc-border);
}
.tc-chip--lime i {
  background: var(--tc-primary);
  box-shadow: none;
  color: var(--tc-on-primary);
}

/* ---------- Integrations catalogue ---------- */
.tc-catalog {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  height: 100%;
  padding: 24px;
}
.tc-catalog__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.tc-catalog__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
  font-size: 16px;
}
.tc-catalog__title {
  flex: 1;
  margin: 0;
  font-size: 17px;
}
.tc-catalog__count {
  padding: 2px 10px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-muted);
}
.tc-catalog__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--tc-border);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-catalog__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.tc-catalog__item > i {
  width: 22px;
  flex-shrink: 0;
  font-size: 18px;
  text-align: center;
}
.tc-catalog__item small {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--tc-muted);
}

/* ---------- Connector card (integrations listing) ---------- */
.tc-connector {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  color: var(--tc-text);
  transition: transform var(--tc-transition), box-shadow var(--tc-transition), border-color var(--tc-transition);
}
.tc-connector:hover {
  transform: translateY(-4px);
  box-shadow: var(--tc-shadow);
  border-color: var(--tc-primary);
}
.tc-connector:focus-visible {
  outline: 2px solid var(--tc-focus);
  outline-offset: 3px;
}
.tc-connector__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tc-connector__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--tc-radius);
  background: var(--tc-surface-2);
  color: var(--tc-heading);
  font-size: 24px;
}
.tc-connector__name {
  margin: 0;
  font-size: 18px;
}
.tc-connector__text {
  margin: 0;
  font-size: 14px;
  flex: 1;
}
.tc-connector__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-connector__link i {
  font-size: 12px;
  transition: transform var(--tc-transition);
}
.tc-connector:hover .tc-connector__link i {
  transform: translateX(4px);
}
.tc-connector--static:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--tc-border);
}

.tc-filter-scroll {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  overflow-x: auto;
  padding: 4px;
}
.tc-filter-scroll .tc-filter {
  flex-wrap: nowrap;
}
@media only screen and (min-width: 992px) {
  .tc-filter-scroll {
    overflow: visible;
  }
  .tc-filter-scroll .tc-filter {
    flex-wrap: wrap;
  }
}

.tc-filter-scroll .tc-filter__btn {
  white-space: nowrap;
}

/* ---------- API banner with code panel ---------- */
.tc-apiband {
  display: grid;
  gap: 40px;
  align-items: center;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid var(--tc-inverse-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-inverse-bg);
  color: rgba(255, 255, 255, 0.72);
}
@media only screen and (min-width: 992px) {
  .tc-apiband {
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
  }
}
.tc-apiband__content, .tc-apiband__code {
  min-width: 0;
}
.tc-apiband__title {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.15;
  color: var(--tc-white);
  margin-bottom: 16px;
}
.tc-apiband__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 32px;
  padding: 0;
  list-style: none;
}
.tc-apiband__list li {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--tc-radius-pill);
  font-family: var(--tc-font-mono);
  font-size: 12.5px;
  color: var(--tc-white);
}
.tc-apiband__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Detail-page header ---------- */
.tc-appheader {
  display: grid;
  gap: 32px;
}
@media only screen and (min-width: 992px) {
  .tc-appheader {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
  }
}
.tc-appheader__main {
  min-width: 0;
}
.tc-appheader__id {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.tc-appheader__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 22px;
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
  font-size: 40px;
  box-shadow: var(--tc-shadow);
}
.tc-appheader__name {
  margin: 0 0 6px;
  font-size: clamp(26px, 3.2vw, 36px);
}
.tc-appheader__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tc-appheader__lead {
  max-width: 640px;
  font-size: 18px;
}
.tc-appheader__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.tc-appheader__facts {
  padding: 28px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}
.tc-appheader__facts-title {
  margin: 0 0 16px;
  font-size: 16px;
}
.tc-appheader__fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tc-border);
  font-size: 14px;
}
.tc-appheader__fact:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.tc-appheader__fact dt {
  font-weight: 500;
  color: var(--tc-muted);
}
.tc-appheader__fact dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  color: var(--tc-heading);
}

/* ---------- Setup steps + message preview ---------- */
.tc-setup {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-setup .tc-step--vertical:last-child {
  padding-bottom: 0;
}
.tc-setup .tc-step__text {
  max-width: 520px;
}

.tc-msg {
  padding: 22px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-lg);
}
.tc-msg__chan {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tc-border);
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-msg__chan span {
  color: var(--tc-muted);
  font-weight: 500;
}
.tc-msg__row {
  display: flex;
  gap: 14px;
}
.tc-msg__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
}
.tc-msg__body {
  min-width: 0;
  flex: 1;
}
.tc-msg__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.tc-msg__head strong {
  color: var(--tc-heading);
}
.tc-msg__head time {
  font-size: 12px;
  color: var(--tc-muted);
}
.tc-msg__text {
  margin: 0 0 12px;
  font-size: 15px;
}
.tc-msg__card {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--tc-primary);
  border-radius: 4px 10px 10px 4px;
  background: var(--tc-bg-soft);
  font-size: 14px;
}
.tc-msg__card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0;
}
.tc-msg__card dt {
  color: var(--tc-muted);
  font-weight: 500;
}
.tc-msg__card dd {
  margin: 0;
  color: var(--tc-heading);
  font-weight: 600;
}
.tc-msg__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.6 Use cases and automation templates
/*----------------------------------------*/
/* ---------- Use cases ---------- */
.tc-case {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: clamp(22px, 3.4vw, 44px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
  text-align: left;
}
@media only screen and (min-width: 992px) {
  .tc-case {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
  }
}
.tc-case__title {
  font-size: clamp(22px, 2.6vw, 30px);
}
.tc-case__metric {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--tc-border);
}
.tc-case__metric strong {
  font-family: var(--tc-font-heading);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tc-link);
}
.tc-case__metric span {
  font-size: 14px;
}
.tc-case__visual {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-bg-soft);
  font-size: 13px;
}
.tc-case .tc-checklist {
  margin-bottom: 0;
}

/* App chips (template cards) ------------------------------------------------ */
.tc-app-chips {
  display: flex;
  align-items: center;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.tc-app-chips__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -6px;
  border: 2px solid var(--tc-surface);
  border-radius: 50%;
  background: var(--tc-surface-2);
  font-size: 14px;
  color: var(--tc-heading);
  box-shadow: 0 0 0 1px var(--tc-border);
}
.tc-app-chips__item:first-child {
  margin-left: 0;
}
.tc-app-chips__label {
  margin-left: 12px;
  font-size: 12px;
  color: var(--tc-muted);
}

.tc-template .tc-feature-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tc-template .tc-feature-card__link {
  padding-top: 16px;
}

.tc-template-filter {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.tc-template-filter .tc-tabs__list {
  max-width: 100%;
}

/* Use-case mini mockups ----------------------------------------------------- */
.tc-usecase {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .tc-usecase {
    grid-template-columns: 5fr 7fr;
    gap: 64px;
  }
}
.tc-usecase__title {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 14px;
}

.tc-usecase .tc-checklist {
  margin-bottom: 28px;
}

@media only screen and (max-width: 575px) {
  .tc-template-filter .tc-tabs__list {
    gap: 2px;
    padding: 4px;
  }
}

@media only screen and (max-width: 575px) {
  .tc-template-filter .tc-tabs__tab {
    padding: 9px 12px;
    font-size: 13px;
  }
}

.tc-scenario {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 28px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  transition: transform var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-scenario:hover {
  transform: translateY(-4px);
  box-shadow: var(--tc-shadow);
}
.tc-scenario__tag {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-muted);
}
.tc-scenario__tag i {
  color: var(--tc-heading);
}
.tc-scenario__title {
  margin: 0;
  font-size: 21px;
}
.tc-scenario__text {
  margin: 0;
  flex: 1;
}
.tc-scenario__metric {
  padding: 5px 14px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-primary);
  font-size: 13px;
  font-weight: 700;
  color: var(--tc-on-primary);
}

.tc-case-tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 28px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  transition: transform var(--tc-transition), box-shadow var(--tc-transition), border-color var(--tc-transition);
}
.tc-case-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--tc-shadow);
  border-color: var(--tc-primary);
}
.tc-case-tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tc-case-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 20px;
}
.tc-case-tile__title {
  margin: 4px 0 0;
  font-size: 21px;
}
.tc-case-tile__text {
  margin: 0;
  flex: 1;
}
.tc-case-tile__metric {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0;
  border-block: 1px dashed var(--tc-border);
}
.tc-case-tile__metric strong {
  font-family: var(--tc-font-heading);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tc-heading);
}
.tc-case-tile__metric span {
  font-size: 14px;
  color: var(--tc-muted);
}

.tc-custom-banner {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: clamp(24px, 5vw, 56px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
}
@media only screen and (min-width: 992px) {
  .tc-custom-banner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
  }
}
.tc-custom-banner__title {
  font-family: var(--tc-font-heading);
  font-size: clamp(28px, 22.5217391304px + 1.5217391304vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--tc-heading);
  margin: 8px 0 14px;
}
.tc-custom-banner__visual {
  min-width: 0;
  padding: 20px;
  border-radius: var(--tc-radius-lg);
  background: var(--tc-bg-soft);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.7 Statistics, KPI strips and revenue bands
/*----------------------------------------*/
/* ---------- Statistics ---------- */
.tc-figures {
  display: grid;
  gap: 16px;
}
@media only screen and (min-width: 992px) {
  .tc-figures {
    grid-template-columns: 1fr 1.25fr;
    gap: 20px;
  }
}
.tc-figures__lead {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 280px;
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
}
.tc-figures__lead::before {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tc-glow), transparent);
}
.tc-figures__lead .tc-stat {
  position: relative;
}
.tc-figures__lead .tc-stat__label {
  max-width: 28ch;
  font-size: 17px;
}
.tc-figures__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media only screen and (min-width: 992px) {
  .tc-figures__grid {
    gap: 20px;
  }
}
.tc-figures__grid .tc-stat--card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ---------- Metrics band (lime band with oversized figures) ---------- */
.tc-metrics .tc-stat__value {
  font-size: clamp(44px, 5.6vw, 76px);
  letter-spacing: -0.05em;
}
.tc-metrics .tc-stat__label {
  font-weight: 600;
}

/* Metrics ------------------------------------------------------------------- */
.tc-impact {
  height: 100%;
}
.tc-impact .tc-stat__value {
  margin-bottom: 4px;
}
.tc-impact__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.tc-impact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--tc-surface-2);
  color: var(--tc-heading);
}
.tc-impact__foot {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--tc-muted);
}

/* Statistics band */
.tc-band--ruled .tc-stat {
  padding-inline: 8px;
}
.tc-band--ruled .tc-stat__value {
  font-size: clamp(32px, 4.4vw, 52px);
}
@media only screen and (min-width: 992px) {
  .tc-band--ruled .row > div + div .tc-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
}

/* KPI strip with counters */
.tc-kpi-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-border);
}
@media only screen and (min-width: 992px) {
  .tc-kpi-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tc-kpi-strip__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--tc-surface);
}
.tc-kpi-strip__label {
  font-size: 14px;
  color: var(--tc-text);
}
.tc-kpi-strip__value {
  font-family: var(--tc-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tc-heading);
  font-variant-numeric: tabular-nums;
}
.tc-kpi-strip__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.tc-kpi-strip__foot .tc-spark {
  max-width: 90px;
  flex-shrink: 1;
}
@media only screen and (min-width: 1201px) {
  .tc-kpi-strip__foot .tc-spark {
    max-width: 120px;
  }
}
.tc-kpi-strip__foot {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-success);
}

/* Revenue statistics band: lead number + three mini trends */
.tc-revenue-band {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .tc-revenue-band {
    grid-template-columns: 1fr 1.3fr;
    gap: 64px;
  }
}
.tc-revenue-band__lead .tc-stat__value {
  font-size: clamp(48px, 7vw, 88px);
  letter-spacing: -0.04em;
  color: var(--tc-white);
}
.tc-revenue-band__lead p {
  max-width: 380px;
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
}
.tc-revenue-band__grid {
  display: grid;
  gap: 16px;
}
@media only screen and (min-width: 576px) {
  .tc-revenue-band__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.tc-revenue-band__item {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--tc-radius-lg);
  background: rgba(255, 255, 255, 0.04);
}
.tc-revenue-band__item .tc-stat__value {
  font-size: clamp(26px, 3vw, 34px);
  color: var(--tc-white);
  margin-bottom: 4px;
}
.tc-revenue-band__item .tc-stat__label {
  font-size: 13px;
  margin-bottom: 14px;
}
.tc-revenue-band__item .tc-spark {
  max-width: none;
}

/* =========================================================
   Metrics – huge numerals
   ========================================================= */
.tc-stat--mega {
  display: grid;
  gap: 4px 48px;
  align-items: end;
  padding: clamp(20px, 3vw, 36px) 0;
  border-top: 1px solid color-mix(in srgb, var(--tc-on-primary) 50%, transparent);
}
@media only screen and (min-width: 992px) {
  .tc-stat--mega {
    grid-template-columns: 1fr 280px;
  }
}
.tc-stat--mega .tc-stat__value {
  margin: 0;
  font-size: clamp(76px, 15vw, 220px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.06em;
  color: var(--tc-on-primary);
}
.tc-stat--mega .tc-stat__value .tc-text-serif {
  font-size: 0.9em;
  letter-spacing: -0.03em;
}
.tc-stat--mega .tc-stat__label {
  padding-bottom: 12px;
  font-size: 17px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--tc-on-primary) 82%, transparent);
}

.tc-metrics__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: clamp(24px, 4vw, 48px);
}
.tc-metrics__head h2 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--tc-on-primary);
}
.tc-metrics__head p {
  margin: 0;
  max-width: 360px;
  font-size: 15px;
  color: color-mix(in srgb, var(--tc-on-primary) 82%, transparent);
}

/* ---------- Statistics strip ---------- */
.tc-vitals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-border);
}
@media only screen and (min-width: 992px) {
  .tc-vitals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tc-vitals__item {
  padding: clamp(24px, 3vw, 40px);
  background: var(--tc-bg);
}
.tc-vitals .tc-stat__value {
  font-size: clamp(30px, 3.6vw, 48px);
}
.tc-vitals .tc-stat__label {
  font-size: 14px;
}

.tc-stat--tall {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
}
.tc-stat--tall .tc-stat__value {
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.04em;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.8 Customer proof: quotes, results, stories and ratings
/*----------------------------------------*/
/* ---------- Testimonials ---------- */
.tc-praise {
  display: grid;
  gap: 16px;
}
@media only screen and (min-width: 992px) {
  .tc-praise {
    grid-template-columns: 1.15fr 1fr;
    gap: 20px;
  }
}
.tc-praise__side {
  display: grid;
  gap: 16px;
}
@media only screen and (min-width: 992px) {
  .tc-praise__side {
    gap: 20px;
  }
}
.tc-praise .tc-testimonial-card {
  padding: clamp(24px, 3vw, 36px);
}
.tc-praise .tc-testimonial-card--featured .tc-testimonial-card__quote {
  font-family: var(--tc-font-heading);
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* ---------- Customer results: big metric cards ---------- */
.tc-result {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(26px, 3vw, 40px);
  border: 2px solid var(--tc-ink);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
  color: var(--tc-text);
}
.tc-result__metric {
  display: block;
  margin-bottom: 8px;
  font-family: var(--tc-font-heading);
  font-size: clamp(64px, 8vw, 104px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--tc-heading);
}
.tc-result__label {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 2px solid currentColor;
  font-family: var(--tc-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--tc-heading);
}
.tc-result__quote {
  flex-grow: 1;
  margin-bottom: 28px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--tc-heading);
}
.tc-result__who {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tc-result__who strong {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 16px;
  color: var(--tc-heading);
}
.tc-result__who span {
  font-size: 14px;
}
.tc-result--lime {
  background: var(--tc-primary);
}
.tc-result--lime .tc-result__metric, .tc-result--lime .tc-result__quote, .tc-result--lime .tc-result__who strong {
  color: var(--tc-on-primary);
}
.tc-result--lime .tc-result__label, .tc-result--lime .tc-result__who span {
  color: color-mix(in srgb, var(--tc-on-primary) 78%, transparent);
}
.tc-result--lime .tc-result__avatar {
  border-color: var(--tc-on-primary);
}
.tc-result--ink {
  background: var(--tc-ink);
  border-color: var(--tc-ink);
}
.tc-result--ink[data-theme=dark] {
  --tc-text: rgba(255, 255, 255, 0.7);
}
.tc-result--ink .tc-result__metric {
  color: var(--tc-primary-bright);
}
.tc-result--ink .tc-result__label {
  color: var(--tc-white);
  border-color: rgba(255, 255, 255, 0.25);
}
@media only screen and (min-width: 992px) {
  .tc-result--offset {
    margin-top: 48px;
  }
}

/* ---------- Testimonial wall (staggered masonry) ---------- */
.tc-wall {
  column-count: 1;
  column-gap: 20px;
}
@media only screen and (min-width: 768px) {
  .tc-wall {
    column-count: 2;
  }
}
@media only screen and (min-width: 992px) {
  .tc-wall {
    column-count: 3;
  }
}
.tc-wall__item {
  display: inline-block;
  width: 100%;
  margin: 0 0 20px;
  break-inside: avoid;
}
.tc-wall__item .tc-testimonial-card {
  height: auto;
  padding: 26px;
}
.tc-wall__item .tc-testimonial-card__quote {
  font-size: 16px;
  margin-bottom: 22px;
}
.tc-wall__item .tc-testimonial-card__rating {
  margin-bottom: 14px;
}
.tc-wall__item--short .tc-testimonial-card__quote {
  font-family: var(--tc-font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.tc-wall__item--ink .tc-testimonial-card {
  background: var(--tc-ink);
  border-color: var(--tc-ink);
}
.tc-wall__item--ink .tc-testimonial-card .tc-testimonial-card__quote, .tc-wall__item--ink .tc-testimonial-card .tc-testimonial-card__name {
  color: var(--tc-white);
}
.tc-wall__item--ink .tc-testimonial-card .tc-testimonial-card__role {
  color: rgba(255, 255, 255, 0.6);
}
.tc-wall__item--ink .tc-testimonial-card .tc-testimonial-card__rating {
  color: var(--tc-primary-bright);
}
@media only screen and (min-width: 992px) {
  .tc-wall__item--tilt .tc-testimonial-card {
    transform: rotate(-1.2deg);
  }
}
.tc-wall__item--stat {
  text-align: left;
}
.tc-wall__badge {
  display: block;
  padding: 28px;
  border: 2px solid var(--tc-ink);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-wall__badge strong {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}
.tc-wall__badge span {
  font-size: 15px;
  font-weight: 600;
}

/* Editorial quote */
.tc-editorial-quote {
  max-width: 1080px;
  margin: 0 auto;
  padding-block: clamp(24px, 5vw, 64px);
}
.tc-editorial-quote__text {
  margin: 0 0 clamp(32px, 4vw, 56px);
  font-family: var(--tc-font-heading);
  font-size: clamp(30px, 5.2vw, 68px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--tc-heading);
}
.tc-editorial-quote__text .tc-text-serif {
  font-size: 1.1em;
  box-shadow: inset 0 -0.28em 0 var(--tc-primary);
}
.tc-editorial-quote__author {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}
.tc-editorial-quote__author strong {
  display: block;
  color: var(--tc-heading);
}

/* Testimonial switcher: featured quote + thumbnails (tc-tabs behaviour) */
.tc-voices {
  display: grid;
  gap: 20px;
}
@media only screen and (min-width: 992px) {
  .tc-voices {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
  }
}
.tc-voices__stage {
  min-width: 0;
}
.tc-voices__card {
  min-height: 100%;
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--tc-radius-xl);
  box-shadow: var(--tc-shadow-sm);
}
@media only screen and (min-width: 992px) {
  .tc-voices__card {
    min-height: 400px;
  }
}
.tc-voices__quote {
  margin-bottom: 36px;
  font-family: var(--tc-font-heading);
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.015em;
}
.tc-voices__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--tc-border);
}
.tc-voices .tc-testimonial-card__name {
  color: var(--tc-heading);
  font-size: 17px;
}
.tc-voices__result strong {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tc-heading);
}
.tc-voices__result span {
  font-size: 14px;
  color: var(--tc-muted);
}
@media only screen and (min-width: 576px) {
  .tc-voices__result {
    text-align: right;
  }
}
.tc-voices__list {
  display: grid;
  gap: 10px;
  align-content: start;
}
@media only screen and (min-width: 768px) {
  .tc-voices__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 992px) {
  .tc-voices__list {
    grid-template-columns: 1fr;
  }
}
.tc-voices__thumb {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--tc-transition), border-color var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-voices__thumb strong {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 15px;
  line-height: 1.3;
  color: var(--tc-heading);
}
.tc-voices__thumb small {
  display: block;
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-voices__thumb:hover {
  border-color: var(--tc-heading);
}
.tc-voices__thumb.is-active {
  background: var(--tc-ink);
  border-color: var(--tc-ink);
  box-shadow: var(--tc-shadow);
}
.tc-voices__thumb.is-active strong {
  color: var(--tc-white);
}
.tc-voices__thumb.is-active small {
  color: rgba(255, 255, 255, 0.68);
}
.tc-voices__thumb.is-active .tc-avatar {
  border-color: var(--tc-primary);
}

/* Testimonial result metric */
.tc-outcome {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-outcome__value {
  font-family: var(--tc-font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tc-heading);
}
.tc-outcome__label {
  font-size: 14px;
  color: var(--tc-text);
}

/* metric line inside a primary-coloured testimonial card */
.tc-testimonial-card--featured .tc-outcome {
  border-color: color-mix(in srgb, var(--tc-on-primary) 25%, transparent);
}
.tc-testimonial-card--featured .tc-outcome .tc-outcome__value {
  color: var(--tc-on-primary);
}
.tc-testimonial-card--featured .tc-outcome .tc-outcome__label {
  color: color-mix(in srgb, var(--tc-on-primary) 82%, transparent);
}

/* =========================================================
   Testimonials – oversized quotes with portrait cut-outs
   ========================================================= */
.tc-pullquote {
  position: relative;
  display: grid;
  gap: 28px 56px;
  align-items: center;
  margin: 0;
  padding-block: clamp(32px, 5vw, 64px);
  border-top: 1px solid var(--tc-border);
}
@media only screen and (min-width: 992px) {
  .tc-pullquote {
    grid-template-columns: 300px 1fr;
  }
  .tc-pullquote--flip {
    grid-template-columns: 1fr 300px;
  }
  .tc-pullquote--flip .tc-pullquote__portrait {
    order: 2;
  }
}
.tc-pullquote__portrait {
  position: relative;
  width: min(240px, 70%);
  justify-self: start;
}
@media only screen and (min-width: 992px) {
  .tc-pullquote__portrait {
    width: 100%;
  }
}
.tc-pullquote__portrait::before {
  content: "";
  position: absolute;
  inset: 12% -10% -4% 10%;
  border-radius: 50%;
  background: var(--tc-primary);
  transform: rotate(-8deg);
}
.tc-pullquote__img {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 999px 999px 28px 28px;
  object-fit: cover;
  object-position: center 22%;
  box-shadow: var(--tc-shadow);
}
.tc-pullquote__quote {
  margin: 0 0 28px;
  font-size: clamp(26px, 3.9vw, 58px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--tc-heading);
}
.tc-pullquote__quote .tc-text-serif {
  font-size: 1.08em;
  letter-spacing: -0.02em;
}
.tc-pullquote__author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-size: 15px;
}
.tc-pullquote__author strong {
  font-family: var(--tc-font-heading);
  font-size: 17px;
  color: var(--tc-heading);
}
.tc-pullquote__author span {
  color: var(--tc-muted);
}
.tc-pullquote__author::before {
  content: "";
  width: 40px;
  height: 2px;
  background: var(--tc-heading);
}
.tc-pullquote--cyan .tc-pullquote__portrait::before {
  background: var(--tc-accent);
  transform: rotate(10deg);
}
.tc-pullquote--ink .tc-pullquote__portrait::before {
  background: var(--tc-ink);
  transform: rotate(-4deg);
  border-radius: 36% 64% 58% 42%/40% 36% 64% 60%;
}

/* ---------- Customer success cards ---------- */
.tc-story {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: transform var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-story:hover {
  transform: translateY(-4px);
  box-shadow: var(--tc-shadow);
}
.tc-story__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-bottom: 1px solid var(--tc-border);
}
.tc-story__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc-story__company {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-sm);
  font-family: var(--tc-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--tc-heading);
}
.tc-story__company i {
  color: var(--tc-link);
}
.tc-story__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px;
}
.tc-story__industry {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-story__metric {
  margin-bottom: 14px;
  font-family: var(--tc-font-heading);
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--tc-heading);
}
.tc-story__metric span {
  display: block;
  margin-top: 10px;
  font-family: var(--tc-font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tc-text);
}
.tc-story__text {
  font-size: 15px;
}
.tc-story__link {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--tc-font-heading);
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-story__link i {
  margin-left: 6px;
  font-size: 12px;
  transition: transform var(--tc-transition);
}
.tc-story__link:hover {
  color: var(--tc-link);
}
.tc-story__link:hover i {
  transform: translateX(4px);
}

/* ---------- Executive quotes ---------- */
.tc-exec {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 32px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}
.tc-exec__quote {
  flex-grow: 1;
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tc-heading);
}
.tc-exec__author {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tc-exec__name {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 16px;
  color: var(--tc-heading);
}
.tc-exec__role {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--tc-muted);
}
.tc-exec__company {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-exec__mark {
  margin-bottom: 24px;
  font-size: 28px;
  color: var(--tc-accent-deep);
  opacity: 0.55;
}
.tc-exec__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}
.tc-exec__stack > div {
  flex: 1;
}
.tc-exec--featured {
  padding: clamp(32px, 4vw, 56px);
}
.tc-exec--featured .tc-exec__quote {
  font-family: var(--tc-font-heading);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* ---- Pull quote, phases, steps ---- */
.tc-customer-quote {
  display: grid;
  margin: 0;
  overflow: hidden;
  border-radius: var(--tc-radius-xl);
  background: var(--tc-inverse-bg);
  color: rgba(255, 255, 255, 0.78);
}
@media only screen and (min-width: 768px) {
  .tc-customer-quote {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  }
}
.tc-customer-quote__portrait {
  height: 320px;
}
@media only screen and (min-width: 768px) {
  .tc-customer-quote__portrait {
    height: auto;
    min-height: 420px;
  }
}
.tc-customer-quote__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}
.tc-customer-quote__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: clamp(28px, 5vw, 64px);
}
.tc-customer-quote__mark {
  font-size: 36px;
  color: var(--tc-primary);
}
.tc-customer-quote__text {
  margin: 0;
  font-family: var(--tc-font-heading);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--tc-white);
}
.tc-customer-quote__author {
  display: grid;
  gap: 2px;
}
.tc-customer-quote__author strong {
  color: var(--tc-white);
  font-size: 17px;
}
.tc-customer-quote__author span {
  font-size: 14px;
}

/* ---------- Spotlight: large featured quote with portrait ---------- */
.tc-spotlight {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--tc-inverse-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-inverse-bg);
  color: rgba(255, 255, 255, 0.72);
}
@media only screen and (min-width: 992px) {
  .tc-spotlight {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  }
}
.tc-spotlight__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 72px);
}
.tc-spotlight__mark {
  display: block;
  margin-bottom: 12px;
  font-family: var(--tc-font-serif, Georgia, serif);
  font-size: 110px;
  line-height: 0.7;
  color: var(--tc-primary-bright);
}
.tc-spotlight__quote {
  margin: 0 0 32px;
  font-family: var(--tc-font-heading);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--tc-white);
  text-wrap: balance;
}
.tc-spotlight__author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tc-spotlight__author strong {
  display: block;
  color: var(--tc-white);
}
.tc-spotlight__author span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}
.tc-spotlight__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.tc-spotlight__chip {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--tc-radius-pill);
  font-size: 13px;
  color: var(--tc-white);
}
.tc-spotlight__chip strong {
  margin-right: 6px;
  color: var(--tc-primary-bright);
  font-family: var(--tc-font-heading);
}
.tc-spotlight__media {
  position: relative;
  min-height: 340px;
}
.tc-spotlight__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.tc-spotlight__badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
  padding: 14px 18px;
  border-radius: var(--tc-radius);
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 14px;
  font-weight: 600;
}
.tc-spotlight__badge strong {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 28px;
  line-height: 1.1;
}

/* ---------- Rating summary ---------- */
.tc-rating {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: clamp(24px, 3vw, 40px);
  height: 100%;
}
.tc-rating__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-rating__score {
  font-family: var(--tc-font-heading);
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--tc-heading);
}
.tc-rating__score small {
  font-size: 0.32em;
  font-weight: 600;
  color: var(--tc-muted);
  letter-spacing: 0;
}
.tc-rating__stars {
  color: var(--tc-star);
  letter-spacing: 3px;
}
.tc-rating__count {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--tc-muted);
}
.tc-rating__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  font-size: 14px;
}
.tc-rating__row:last-child {
  margin-bottom: 0;
}
.tc-rating__label {
  color: var(--tc-heading);
  font-weight: 600;
}
.tc-rating__label i {
  margin-left: 4px;
  color: var(--tc-star);
  font-size: 11px;
}
.tc-rating__pct {
  text-align: right;
  color: var(--tc-muted);
}
.tc-rating__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

/* ---------- Video testimonial card (poster + play button, no video file) ---------- */
.tc-video-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--tc-radius-lg);
  background: var(--tc-ink);
  color: var(--tc-white);
  isolation: isolate;
}
.tc-video-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.6s var(--tc-ease);
}
.tc-video-card:hover .tc-video-card__img {
  transform: scale(1.05);
}
.tc-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 35%, rgba(11, 12, 8, 0.88));
}
.tc-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 20px;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--tc-primary) 30%, transparent);
  transition: transform var(--tc-transition);
}
.tc-video-card__play i {
  margin-left: 3px;
}
.tc-video-card:hover .tc-video-card__play {
  transform: scale(1.1);
}
.tc-video-card__time {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: var(--tc-radius-pill);
  background: rgba(11, 12, 8, 0.6);
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.tc-video-card__caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 24px;
}
.tc-video-card__quote {
  display: block;
  margin-bottom: 8px;
  font-family: var(--tc-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.tc-video-card__who {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.tc-spotlight__mark {
  height: 0.5em;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.9 Feature rows, grids, lists and comparison blocks
/*----------------------------------------*/
/* ---------- Plate: colour block behind a feature mockup ---------- */
.tc-plate {
  position: relative;
  padding: clamp(18px, 4vw, 44px);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-primary);
  overflow: hidden;
}
.tc-plate::before {
  content: "";
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  right: -18%;
  top: -26%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.tc-plate .tc-window {
  position: relative;
  border: 2px solid var(--tc-ink);
  box-shadow: 8px 8px 0 var(--tc-ink);
}
.tc-plate--ink {
  background: var(--tc-ink);
}
.tc-plate--ink::before {
  background: color-mix(in srgb, var(--tc-primary) 12%, transparent);
}
.tc-plate--ink .tc-window {
  box-shadow: 8px 8px 0 var(--tc-primary);
  border-color: var(--tc-primary);
}
.tc-plate--accent {
  background: var(--tc-accent);
}
.tc-plate--accent::before {
  background: rgba(255, 255, 255, 0.4);
}
.tc-plate--soft {
  background: var(--tc-bg-soft);
  border: 1px solid var(--tc-border);
}
.tc-plate--soft::before {
  background: var(--tc-primary);
  opacity: 0.55;
}

/* feature-row type: bigger, tighter than the generic section head */
.tc-feature-row {
  padding-block: clamp(36px, 5vw, 64px);
}
.tc-feature-row .tc-split {
  grid-template-columns: minmax(0, 1fr);
}
@media only screen and (min-width: 992px) {
  .tc-feature-row .tc-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tc-feature-row__title {
  margin-bottom: 18px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.tc-feature-row__text {
  margin-bottom: 4px;
  font-size: 18px;
}

.tc-feature-row__num {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 14px;
  border: 2px solid var(--tc-ink);
  border-radius: 99px;
  font-family: var(--tc-font-heading);
  font-size: 13px;
  font-weight: 800;
  color: var(--tc-heading);
}

/* ---------- Benefits strip ---------- */
.tc-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 2px solid var(--tc-ink);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  overflow: hidden;
}
@media only screen and (min-width: 992px) {
  .tc-benefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tc-benefits__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px;
  border-right: 2px solid var(--tc-ink);
  border-bottom: 2px solid var(--tc-ink);
}
.tc-benefits__item:nth-child(2n) {
  border-right: 0;
}
.tc-benefits__item:nth-last-child(-n+2) {
  border-bottom: 0;
}
@media only screen and (min-width: 992px) {
  .tc-benefits__item {
    border-bottom: 0;
  }
  .tc-benefits__item:nth-child(2n) {
    border-right: 2px solid var(--tc-ink);
  }
  .tc-benefits__item:last-child {
    border-right: 0;
  }
}
.tc-benefits__item:hover {
  background: var(--tc-primary);
}
.tc-benefits__icon {
  font-size: 22px;
  color: var(--tc-heading);
}
.tc-benefits__title {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.tc-benefits__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
@media only screen and (max-width: 575px) {
  .tc-benefits__item {
    padding: 18px 16px;
  }
}

.tc-ruled--logos .tc-ruled__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 12px;
}

.tc-ruled--logos .tc-logo-list__img {
  --tc-logo-height: 30px;
}

/* ---------- metrics ---------- */
.tc-ruled--metrics .tc-ruled__cell {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px);
}

.tc-ruled--metrics .tc-stat__value {
  font-size: clamp(40px, 6vw, 72px);
  color: var(--tc-heading);
}

.tc-ruled--metrics .tc-stat__value small {
  font-size: 0.4em;
  letter-spacing: 0;
  color: var(--tc-link);
}

.tc-ruled--metrics .tc-stat__label {
  font-size: 14px;
}

/* ---------- testimonials ---------- */
.tc-ruled--quotes .tc-ruled__cell {
  display: flex;
  flex-direction: column;
}

.tc-ruled--quotes .tc-testimonial-card {
  flex: 1;
}

.tc-ruled--quotes .tc-testimonial-card__quote {
  font-size: 17px;
}

.tc-ruled__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-family: var(--tc-font-mono);
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-ruled__brand i {
  color: var(--tc-link);
}

/* Section intro: plain text, no pill */
.tc-index-intro {
  margin-bottom: clamp(40px, 6vw, 80px);
}
.tc-index-intro__tag {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-index-intro__title {
  margin: 0;
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.tc-index-intro__title .tc-text-serif {
  font-size: 1.1em;
}
.tc-index-intro--center {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}

/* Numbered feature list */
.tc-index-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tc-border);
}
.tc-index-list__item {
  position: relative;
  display: grid;
  gap: 8px 24px;
  align-items: center;
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--tc-border);
  transition: padding var(--tc-transition);
}
@media only screen and (min-width: 768px) {
  .tc-index-list__item {
    grid-template-columns: minmax(90px, 0.6fr) 1.2fr 1.4fr 40px;
  }
}
.tc-index-list__number {
  font-family: var(--tc-font-heading);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--tc-border);
  transition: color var(--tc-transition);
}
.tc-index-list__title {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.tc-index-list__text {
  margin: 0;
  max-width: 460px;
  transition: color var(--tc-transition);
}
.tc-index-list__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--tc-heading);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity var(--tc-transition), transform var(--tc-transition), background var(--tc-transition);
}
.tc-index-list__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.tc-index-list__link:hover {
  background: var(--tc-primary);
}
.tc-index-list__item:hover .tc-index-list__number, .tc-index-list__item:focus-within .tc-index-list__number {
  color: var(--tc-heading);
}
.tc-index-list__item:hover .tc-index-list__text, .tc-index-list__item:focus-within .tc-index-list__text {
  color: var(--tc-heading);
}
.tc-index-list__item:hover .tc-index-list__link, .tc-index-list__item:focus-within .tc-index-list__link {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .tc-index-list__link {
    opacity: 1;
    transform: none;
  }
}

/* Principles */
.tc-principle {
  padding-top: 28px;
  border-top: 1px solid var(--tc-heading);
}
.tc-principle__mark {
  display: block;
  width: 8px;
  height: 8px;
  margin-bottom: 28px;
  border-radius: 50%;
  background: var(--tc-primary);
  box-shadow: 0 0 0 1px var(--tc-heading);
}
.tc-principle__title {
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.tc-principle__text {
  margin: 0;
  max-width: 320px;
}

/* Short supporting points */
.tc-points {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}
@media only screen and (min-width: 768px) {
  .tc-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}
.tc-points__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
}
.tc-points__item strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--tc-font-heading);
  color: var(--tc-heading);
}
.tc-points__item i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--tc-radius);
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
  font-size: 15px;
}
.tc-points--stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 32px;
}
.tc-points--stack .tc-feature-card {
  padding: 22px 24px;
  gap: 18px;
}
.tc-points--stack .tc-feature-card:hover {
  transform: none;
}
.tc-points--stack .tc-feature-card > div {
  min-width: 0;
}
.tc-points--stack .tc-feature-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  font-size: 18px;
}
.tc-points--stack .tc-feature-card__title {
  margin-bottom: 4px;
  font-size: 18px;
}

.tc-presence {
  position: absolute;
  left: 20px;
  bottom: 20px;
  max-width: calc(100% - 40px);
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow);
}

/* Enterprise comparison table */
.tc-compare {
  position: relative; /* containing block for the visually-hidden cell labels */
  overflow: hidden;
}
.tc-compare .tc-table-wrap {
  position: relative;
}
.tc-compare {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-sm);
}
.tc-compare__table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}
.tc-compare__table th, .tc-compare__table td {
  padding: 16px 24px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-compare__table thead th {
  padding-block: 20px;
  font-family: var(--tc-font-heading);
  font-size: 16px;
  color: var(--tc-heading);
  background: var(--tc-surface-2);
  text-align: center;
}
.tc-compare__table thead th:first-child {
  text-align: left;
}
.tc-compare__table tbody th {
  font-weight: 500;
  text-align: left;
  color: var(--tc-heading);
}
.tc-compare__table td {
  text-align: center;
  color: var(--tc-text);
}
.tc-compare__table tbody tr:last-child > * {
  border-bottom: 0;
}
.tc-compare__table tbody tr:not(.tc-compare__group):hover > * {
  background: var(--tc-bg-soft);
}
.tc-compare__table tbody tr:not(.tc-compare__group):hover > .tc-compare__col--featured {
  background: color-mix(in srgb, var(--tc-primary) 30%, transparent);
}
.tc-compare__group th {
  padding: 10px 24px;
  background: var(--tc-bg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-compare__col--featured, .tc-compare__table td.tc-compare__col--featured {
  background: color-mix(in srgb, var(--tc-primary) 16%, transparent);
  font-weight: 600;
  color: var(--tc-heading);
}
thead .tc-compare__col--featured, .tc-compare__table thead .tc-compare__col--featured {
  background: var(--tc-ink);
  color: var(--tc-white);
}
.tc-compare__yes {
  display: flex;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(21, 122, 64, 0.12);
  font-size: 11px;
  color: var(--tc-success);
}
.tc-compare__no {
  color: var(--tc-muted);
}

/* =========================================================
   Craft – asymmetric feature collage with overlaps
   ========================================================= */
.tc-mosaic {
  display: grid;
  gap: 24px;
  --tc-rot: 0deg;
}
.tc-mosaic__item {
  position: relative;
  min-width: 0;
  rotate: var(--tc-rot);
  transition: rotate var(--tc-transition), opacity 0.7s var(--tc-ease), transform 0.7s var(--tc-ease);
}
.tc-mosaic__item .tc-feature-card {
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--tc-shadow-sm);
}
.tc-mosaic__item:hover {
  z-index: 6;
}
.tc-mosaic__photo {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--tc-border);
  border-radius: calc(var(--tc-radius-xl) + 6px);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow);
}
.tc-mosaic__cap {
  padding: 14px 10px 6px;
  font-family: var(--tc-font-serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1.25;
  color: var(--tc-heading);
}
.tc-mosaic__sticker {
  position: absolute;
  z-index: 3;
  top: -18px;
  right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-family: var(--tc-font-heading);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  transform: rotate(12deg);
  box-shadow: var(--tc-shadow-sm);
}
.tc-mosaic .tc-feature-card--highlight .tc-feature-card__title {
  font-size: clamp(26px, 3vw, 40px);
}
.tc-mosaic .tc-feature-card__title {
  font-size: clamp(20px, 2vw, 26px);
}
@media only screen and (min-width: 992px) {
  .tc-mosaic {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 24px;
  }
  .tc-mosaic__item {
    align-self: start;
  }
  .tc-mosaic__item--lead {
    grid-column: 1/7;
    grid-row: 1;
    --tc-rot: -1.5deg;
    z-index: 1;
  }
  .tc-mosaic__item--lead .tc-feature-card {
    min-height: 520px;
  }
  .tc-mosaic__item--dark {
    grid-column: 8/13;
    grid-row: 1;
    --tc-rot: 1.5deg;
    z-index: 2;
    margin-top: 48px;
  }
  .tc-mosaic__item--dark .tc-feature-card {
    min-height: 280px;
  }
  .tc-mosaic__item--photo {
    grid-column: 6/12;
    grid-row: 2;
    --tc-rot: 2.5deg;
    z-index: 4;
    margin-top: -150px;
    margin-left: -24px;
  }
  .tc-mosaic__item--plain {
    grid-column: 1/6;
    margin-left: 56px;
    grid-row: 2;
    align-self: end;
    --tc-rot: -2deg;
    z-index: 2;
  }
}

/* ---------- Enterprise features: numbered list + sticky visual ---------- */
.tc-numbered {
  padding: 0;
  margin: 0;
  list-style: none;
}
.tc-numbered__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px 20px;
  padding: 28px 0;
  border-top: 1px solid var(--tc-border);
}
.tc-numbered__item:last-child {
  border-bottom: 1px solid var(--tc-border);
}
@media only screen and (min-width: 768px) {
  .tc-numbered__item {
    grid-template-columns: 80px 1fr;
  }
}
.tc-numbered__item:hover .tc-numbered__index {
  color: var(--tc-link);
}
.tc-numbered__index {
  font-family: var(--tc-font-serif);
  font-size: 38px;
  font-style: italic;
  line-height: 1;
  color: var(--tc-muted);
  transition: color var(--tc-transition);
}
@media only screen and (min-width: 768px) {
  .tc-numbered__index {
    font-size: 46px;
  }
}
.tc-numbered__title {
  margin-bottom: 8px;
  font-size: 20px;
}
.tc-numbered__text {
  margin: 0;
  max-width: 520px;
}
@media only screen and (min-width: 992px) {
  .tc-numbered__visual {
    position: sticky;
    top: calc(var(--tc-header-height) + 32px);
  }
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.10 Process steps, timelines and rollout plans
/*----------------------------------------*/
/* ---------- Workflow: sticky visual + vertical steps ---------- */
.tc-process {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
@media only screen and (min-width: 992px) {
  .tc-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 88px;
  }
}
@media only screen and (min-width: 992px) {
  .tc-process__visual {
    position: sticky;
    top: calc(var(--tc-header-height) + 40px);
  }
}
.tc-process__steps {
  padding-top: 8px;
}
.tc-process__steps .tc-step--vertical {
  grid-template-columns: 56px 1fr;
  padding-bottom: 44px;
}
.tc-process__steps .tc-step--vertical:last-child {
  padding-bottom: 0;
}
.tc-process__steps .tc-step--vertical .tc-step__number {
  width: 56px;
  height: 56px;
  font-size: 18px;
  background: var(--tc-primary);
  color: var(--tc-ink);
  border: 2px solid var(--tc-ink);
}
.tc-process__steps .tc-step--vertical:not(:last-child)::before {
  left: 27px;
  top: 64px;
  width: 3px;
  background: var(--tc-ink);
}
.tc-process__steps .tc-step--vertical .tc-step__title {
  font-size: 26px;
  letter-spacing: -0.03em;
}
.tc-process__steps .tc-step--vertical .tc-step__text {
  font-size: 17px;
}
.tc-process__chip {
  display: block;
  width: fit-content;
  margin-top: 14px;
  padding: 3px 12px;
  border-radius: 99px;
  background: var(--tc-ink);
  font-size: 12px;
  font-weight: 700;
  color: var(--tc-primary-bright);
}

/* Process step mini nodes --------------------------------------------------- */
.tc-step .tc-node {
  padding: 10px 12px;
  box-shadow: none;
  gap: 10px;
}
.tc-step .tc-node .tc-node__icon {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

.tc-rollout {
  position: relative;
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .tc-rollout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 992px) {
  .tc-rollout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tc-rollout__item {
  position: relative;
  padding: 26px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}
.tc-rollout__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 26px;
  width: 48px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--tc-primary);
}
.tc-rollout__week {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-rollout__title {
  margin: 0 0 8px;
  font-size: 19px;
}
.tc-rollout__text {
  margin: 0;
  font-size: 15px;
}

.tc-step-stack {
  padding-top: 6px;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.11 Call to action blocks
/*----------------------------------------*/
/* ---------- Pricing / CTA touches ---------- */
.tc-launch-cta {
  border: 2px solid var(--tc-ink);
  grid-template-columns: minmax(0, 1fr);
}
@media only screen and (min-width: 992px) {
  .tc-launch-cta {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}
.tc-launch-cta .tc-subscribe__input {
  padding-inline: 14px;
}
.tc-launch-cta .tc-cta__text {
  margin-bottom: 0;
}
.tc-launch-cta .tc-cta__title {
  font-size: clamp(36px, 5.4vw, 72px);
  letter-spacing: -0.045em;
  line-height: 1;
  max-width: 640px;
}
.tc-launch-cta .tc-subscribe {
  max-width: none;
  border: 2px solid var(--tc-ink);
  box-shadow: 5px 5px 0 var(--tc-ink);
}
.tc-launch-cta .tc-subscribe__note {
  color: color-mix(in srgb, var(--tc-on-primary) 75%, transparent);
}

.tc-launch-cta__form {
  position: relative;
  z-index: var(--tc-z-base);
}

/* ---------- CTA ---------- */
.tc-cta--framed {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-bg-soft);
  color: var(--tc-text);
}
.tc-cta--framed .tc-cta__title {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.03em;
  color: var(--tc-heading);
}
.tc-cta--framed .tc-install {
  margin: 0;
  max-width: 420px;
  background: var(--tc-bg);
}
.tc-cta--framed .tc-cta__actions {
  margin-bottom: 24px;
}
.tc-cta--framed .tc-btn {
  border-radius: var(--tc-radius);
}
.tc-cta--framed .tc-btn--light {
  background: transparent;
  color: var(--tc-heading);
  border-color: var(--tc-border);
}
.tc-cta--framed .tc-btn--light:hover {
  background: var(--tc-surface-2);
  color: var(--tc-heading);
}

.tc-cta__aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media only screen and (min-width: 992px) {
  .tc-cta__aside {
    align-items: flex-end;
  }
}

/* Closing CTA: type only */
.tc-closing {
  padding-block: clamp(48px, 8vw, 120px);
}
.tc-closing__inner {
  text-align: center;
}
.tc-closing__title {
  margin-bottom: 20px;
  font-size: clamp(52px, 12vw, 168px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.tc-closing__title .tc-text-serif {
  font-size: 1.1em;
}
.tc-closing__text {
  margin-bottom: 36px;
  font-size: 17px;
}

.tc-closing__title {
  margin-bottom: 28px;
}

/* FAQ help card */
.tc-help-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-top: 12px;
  padding: 20px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}

/* Demo CTA */
.tc-cta--demo {
  padding: clamp(28px, 5vw, 64px);
  gap: 40px;
}
@media only screen and (min-width: 992px) {
  .tc-cta--demo {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 72px;
  }
}
.tc-cta--demo .tc-cta__text {
  margin-bottom: 24px;
}
.tc-cta--demo .tc-cta__list {
  display: grid;
  gap: 10px;
}
.tc-cta--demo .tc-cta__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
}
.tc-cta--demo .tc-cta__list i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 10px;
}

.tc-demo-card {
  position: relative;
  z-index: var(--tc-z-base);
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-lg);
}
.tc-demo-card__title {
  margin-bottom: 20px;
  font-size: 22px;
}
.tc-demo-card select.tc-form__control {
  padding-right: 14px;
}

/* =========================================================
   Finale – giant call to action
   ========================================================= */
.tc-finale {
  overflow: hidden;
}
.tc-finale__glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tc-primary) 28%, transparent), transparent);
  pointer-events: none;
}
.tc-finale__title {
  position: relative;
  margin-bottom: clamp(32px, 5vw, 64px);
  font-size: clamp(54px, 12.6vw, 190px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: var(--tc-white);
}
.tc-finale__title > span {
  display: block;
}
.tc-finale__title .tc-text-serif {
  font-size: 1.05em;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--tc-primary-bright);
}
.tc-finale__foot {
  position: relative;
  display: grid;
  gap: 32px;
  align-items: end;
}
@media only screen and (min-width: 992px) {
  .tc-finale__foot {
    grid-template-columns: 1fr auto;
  }
}
.tc-finale__text {
  max-width: 480px;
  margin-bottom: 28px;
  font-size: clamp(17px, 1.6vw, 20px);
}
.tc-finale__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.tc-finale__orb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-family: var(--tc-font-heading);
  font-size: 17px;
  font-weight: 700;
  rotate: -8deg;
  transition: rotate var(--tc-transition), transform var(--tc-transition), background var(--tc-transition);
}
.tc-finale__orb i {
  font-size: 26px;
  transition: transform var(--tc-transition);
}
.tc-finale__orb:hover {
  rotate: 0deg;
  transform: scale(1.06);
  background: var(--tc-primary-hover);
  color: var(--tc-on-primary);
}
.tc-finale__orb:hover i {
  transform: translate(4px, -4px);
}

/* ---------- Request a demo ---------- */
.tc-demo {
  position: relative;
  display: grid;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-bg-soft);
}
@media only screen and (min-width: 992px) {
  .tc-demo {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 72px;
  }
}
.tc-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--tc-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--tc-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(120deg, var(--tc-black), transparent 60%);
  pointer-events: none;
}
.tc-demo > * {
  position: relative;
}
.tc-demo__title {
  font-family: var(--tc-font-heading);
  font-size: clamp(30px, 24.5217391304px + 1.5217391304vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--tc-heading);
  margin-bottom: 16px;
}
.tc-demo__text {
  max-width: 480px;
  font-size: 17px;
}
.tc-demo__list {
  margin-bottom: 0;
}
.tc-demo__form {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow);
}
.tc-demo__form-title {
  margin-bottom: 24px;
  font-size: 22px;
}
.tc-demo .tc-form__control {
  line-height: 1.5;
}
.tc-demo select.tc-form__control {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237d8174' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.tc-demo__row {
  display: grid;
  gap: 0 16px;
}
@media only screen and (min-width: 576px) {
  .tc-demo__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.tc-demo__note {
  margin: 16px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--tc-muted);
}
.tc-demo__note i {
  margin-right: 6px;
}

.tc-cta .tc-subscribe--center {
  margin: 0 auto 16px;
}

.tc-cta .tc-subscribe__note {
  color: inherit;
}
.tc-cta .tc-subscribe__note a {
  color: var(--tc-primary-bright);
  text-decoration: underline;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.12 Per-home scopes and overrides of shared components (header, section, window ...)
/*----------------------------------------*/
.tc-chart--subtle .tc-chart__area {
  opacity: 0.1;
}

.tc-chart--subtle .tc-chart__dot {
  fill: var(--tc-bg);
  stroke: var(--tc-primary);
}

/* ---------- logo strip ---------- */
.tc-section--strip {
  padding-block: clamp(40px, 5vw, 64px);
}

/* ---------- section head tweaks ---------- */
.tc-section-head--dev .tc-section-head__title {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.03em;
}
.tc-section-head--dev .tc-section-head__tag {
  border-radius: 6px;
  font-family: var(--tc-font-mono);
  font-size: 12px;
  font-weight: 500;
}
.tc-section-head--dev .tc-section-head__tag::before {
  border-radius: 2px;
}

.tc-window--console {
  box-shadow: var(--tc-shadow-lg);
}
.tc-window--console .tc-window__url {
  font-family: var(--tc-font-mono);
}

/* Quiet window: no frame, soft shadow only */
.tc-window--quiet {
  border-radius: var(--tc-radius-xl);
  box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--tc-ink) 18%, transparent), 0 0 0 1px var(--tc-border);
}
.tc-window--quiet .tc-window__bar {
  background: var(--tc-surface);
  border-bottom-color: transparent;
}
.tc-window--quiet .tc-window__dots span {
  background: var(--tc-border) !important;
}
.tc-window--quiet .tc-dashboard {
  background: var(--tc-surface);
}
.tc-window--quiet .tc-panel {
  border-color: transparent;
  background: var(--tc-bg-soft);
}
.tc-window--quiet .tc-chart__area {
  opacity: 0.5;
}

/* Corporate tone: tighter radii and squarer controls, scoped to this page */
.tc-home-business {
  --tc-radius: 8px;
  --tc-radius-lg: 12px;
  --tc-radius-xl: 16px;
}
.tc-home-business .tc-btn {
  border-radius: var(--tc-radius);
}
.tc-home-business .tc-btn--primary {
  box-shadow: none;
}
.tc-home-business .tc-header {
  top: 0;
}
.tc-home-business .tc-header--has-topbar {
  top: 38px;
}
.tc-home-business .tc-header--has-topbar.is-sticky {
  top: 0;
}

.tc-chart--short {
  height: 72px;
}

/* Team collaboration split: let the single column shrink below content width */
.tc-home-business .tc-split {
  grid-template-columns: minmax(0, 1fr);
}
@media only screen and (min-width: 992px) {
  .tc-home-business .tc-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Team presence card over the photo */
.tc-media--tall {
  aspect-ratio: 4/5;
}
.tc-media--tall .tc-media__img {
  object-position: 48% 50%;
}

.tc-feature-card__icon--shield {
  width: 52px;
  height: 60px;
  padding-bottom: 6px;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 14%, 100% 58%, 50% 100%, 0 58%, 0 14%);
}

.tc-home-analytics {
  background: var(--tc-bg-soft);
}

.tc-home-analytics .tc-section {
  background: var(--tc-bg-soft);
}

.tc-home-analytics .tc-section--soft {
  background: var(--tc-bg);
}

.tc-home-analytics .tc-hero {
  background: var(--tc-bg-soft);
}

.tc-home-analytics .tc-feature-card--flat {
  background: var(--tc-bg-soft);
}

/* ---------- Page palette: warm paper, scoped to <body class="tc-page--editorial"> ---------- */
.tc-page--editorial {
  --tc-bg: #f3f0e6;
  --tc-bg-soft: #eae6d7;
  --tc-surface: #fffdf8;
  --tc-surface-2: #f3f0e6;
  --tc-border: #d8d3c0;
  --tc-text: #4b4f42;
  --tc-muted: #6a6e60;
  --tc-grid-line: color-mix(in srgb, var(--tc-ink) 6%, transparent);
  --tc-header-bg: rgba(243, 240, 230, 0.88);
  --tc-paper-ink: var(--tc-ink);
}
.tc-page--editorial .tc-section-head__tag {
  background: transparent;
}
.tc-page--editorial .tc-footer {
  border-top: 1px solid var(--tc-border);
}

/* dark mode: warm "night paper" instead of cream */
[data-theme=dark] .tc-page--editorial {
  --tc-bg: #14130e;
  --tc-bg-soft: #1b1a13;
  --tc-surface: #211f17;
  --tc-surface-2: #1b1a13;
  --tc-border: rgba(255, 255, 255, 0.12);
  --tc-text: rgba(255, 252, 240, 0.72);
  --tc-muted: rgba(255, 252, 240, 0.5);
  --tc-grid-line: rgba(255, 255, 255, 0.06);
  --tc-header-bg: rgba(20, 19, 14, 0.88);
  --tc-paper-ink: #fffcf0;
}

/* Section colour modifiers (shared token system, page-local use) */
.tc-section--lime {
  background: var(--tc-primary);
  color: color-mix(in srgb, var(--tc-on-primary) 80%, transparent);
}

.tc-section--ink {
  background: var(--tc-bg);
}

/* =========================================================
   Header – "Menu" pill at every width (opens the shared offcanvas drawer)
   ========================================================= */
.tc-header--menu-only .tc-header__toggle {
  width: auto;
  height: 52px;
  gap: 14px;
  padding: 0 10px 0 24px;
  border: 0;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-ink);
  color: var(--tc-white);
  font-family: var(--tc-font-heading);
  font-size: 16px;
  font-weight: 600;
}
.tc-header--menu-only .tc-header__toggle:hover {
  background: var(--tc-ink-hover);
  color: var(--tc-white);
  transform: translateY(-2px);
}
.tc-header--menu-only .tc-header__toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-ink);
  font-size: 13px;
}

/* very small phones: the "Menu" pill keeps only its icon so the header fits in 320px */
@media only screen and (max-width: 480px) {
  .tc-header--menu-only .tc-header__toggle {
    gap: 0;
    padding: 0 10px;
  }
  .tc-header--menu-only .tc-header__toggle .tc-header__toggle-label {
    display: none;
  }
}
/* ---------- Header: solid bar once scrolled (menu itself is the shared one) ---------- */
.tc-header--enterprise.is-sticky {
  background: var(--tc-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---- Use case tile + custom banner ---- */
.tc-filter--center {
  display: flex;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 8px;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.13 Trusted-by logo strips
/*----------------------------------------*/
.tc-strip-title {
  margin-bottom: 20px;
  font-family: var(--tc-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-muted);
}

/* Customer logo strip */
.tc-logo-strip__inner {
  display: grid;
  gap: 24px;
  align-items: center;
  padding-top: 40px;
  border-top: 1px solid var(--tc-border);
}
@media only screen and (min-width: 1201px) {
  .tc-logo-strip__inner {
    grid-template-columns: 260px 1fr;
    gap: 56px;
  }
}
.tc-logo-strip__label {
  margin: 0;
  font-family: var(--tc-font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tc-heading);
}

.tc-logo-list--strip {
  justify-content: space-between;
  gap: 20px 36px;
}
.tc-logo-list--strip .tc-logo-list__img {
  --tc-logo-height: 32px;
}

/* ---------- Trust bar ---------- */
.tc-trustbar {
  border-bottom: 1px solid var(--tc-border);
  margin-bottom: clamp(56px, 7vw, 96px);
  padding-block: clamp(36px, 4vw, 48px);
}
.tc-trustbar__inner {
  display: grid;
  gap: 24px;
  align-items: center;
}
@media only screen and (min-width: 1201px) {
  .tc-trustbar__inner {
    grid-template-columns: 300px 1fr;
    gap: 56px;
  }
}
.tc-trustbar__label {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--tc-muted);
}
@media only screen and (min-width: 1201px) {
  .tc-trustbar__label {
    text-align: left;
  }
}
.tc-trustbar .tc-logo-list {
  gap: 16px 40px;
}
@media only screen and (min-width: 1201px) {
  .tc-trustbar .tc-logo-list {
    justify-content: space-between;
  }
}
.tc-trustbar .tc-logo-list__img {
  --tc-logo-height: 30px;
}

/* ---------- Customer logo grid (hairline cells) ---------- */
.tc-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-border);
}
@media only screen and (min-width: 768px) {
  .tc-logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tc-logo-grid__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  padding: 20px;
  background: var(--tc-surface);
  transition: background var(--tc-transition);
}
.tc-logo-grid__cell:hover {
  background: var(--tc-bg-soft);
}
.tc-logo-grid__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 34px;
  opacity: 0.7;
}
[data-theme=dark] .tc-logo-grid__img {
  filter: invert(1);
}
.tc-logo-grid__word {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tc-font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--tc-muted);
}
.tc-logo-grid__word i {
  font-size: 18px;
  color: var(--tc-heading);
}
.tc-logo-grid__word--serif {
  font-family: var(--tc-font-serif, Georgia, serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-style: italic;
}
.tc-logo-grid__word--caps {
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tc-logo-grid__word--mono {
  font-family: var(--tc-font-mono);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.05em;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.14 Pricing overrides, comparison tables and guarantees
/*----------------------------------------*/
/* ---------- pricing ---------- */
.tc-pricing--hairline .tc-pricing__toggle {
  margin-bottom: 36px;
}
.tc-pricing--hairline .tc-ruled__cell {
  padding: 0;
}
.tc-pricing--hairline .tc-pricing-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: clamp(28px, 3.5vw, 40px);
  transform: none;
}
.tc-pricing--hairline .tc-pricing-card--featured {
  background: var(--tc-surface);
  box-shadow: inset 0 2px 0 var(--tc-primary);
  transform: none;
  color: var(--tc-text);
}
.tc-pricing--hairline .tc-pricing-card--featured .tc-pricing-card__name, .tc-pricing--hairline .tc-pricing-card--featured .tc-pricing-card__amount {
  color: var(--tc-heading);
}
.tc-pricing--hairline .tc-pricing-card--featured .tc-pricing-card__price {
  border-color: var(--tc-border);
}
.tc-pricing--hairline .tc-pricing-card--featured .tc-pricing-card__period {
  color: var(--tc-muted);
}
.tc-pricing--hairline .tc-pricing-card--featured .tc-pricing-card__feature i {
  color: var(--tc-link);
}
.tc-pricing--hairline .tc-pricing-card__amount {
  font-family: var(--tc-font-mono);
  font-weight: 500;
  letter-spacing: -0.05em;
}
.tc-pricing--hairline .tc-pricing-card__badge {
  border-radius: 6px;
}
.tc-pricing--hairline .tc-btn {
  border-radius: var(--tc-radius);
}

/* Minimal pricing cards */
.tc-pricing-card--minimal {
  padding: 36px 0 0;
  border: 0;
  border-top: 1px solid var(--tc-heading);
  border-radius: 0;
  background: transparent;
}
@media only screen and (min-width: 992px) {
  .tc-pricing-card--minimal {
    padding-right: 24px;
  }
}
.tc-pricing-card--minimal .tc-pricing-card__amount {
  font-weight: 600;
  font-size: clamp(56px, 6vw, 80px);
  letter-spacing: -0.05em;
}
.tc-pricing-card--minimal .tc-pricing-card__name {
  font-size: 22px;
}
.tc-pricing-card--minimal.tc-pricing-card--marked .tc-pricing-card__name::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-radius: 50%;
  background: var(--tc-primary);
  box-shadow: 0 0 0 1px var(--tc-heading);
  vertical-align: middle;
}

/* ---------- Pricing tweaks ---------- */
.tc-pricing--enterprise .tc-pricing-card {
  border-radius: var(--tc-radius-lg);
}
.tc-pricing--enterprise .tc-pricing-card__amount--text {
  font-size: 38px;
  line-height: 52px;
  letter-spacing: -0.02em;
}

/* ---------- Data table / feature comparison ---------- */
.tc-datatable {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  -webkit-overflow-scrolling: touch;
}
.tc-datatable:focus-visible {
  outline: 2px solid var(--tc-focus);
  outline-offset: 3px;
}
.tc-datatable__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}
.tc-datatable__table th, .tc-datatable__table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--tc-border);
  text-align: left;
  vertical-align: middle;
}
.tc-datatable__table thead th {
  font-family: var(--tc-font-heading);
  font-size: 15px;
  color: var(--tc-heading);
  background: var(--tc-surface-2);
  white-space: nowrap;
}
.tc-datatable__table tbody th[scope=row] {
  font-weight: 500;
  color: var(--tc-heading);
}
.tc-datatable__table tbody tr:last-child > * {
  border-bottom: 0;
}
.tc-datatable__table small {
  display: block;
  font-size: 13px;
  color: var(--tc-muted);
  font-weight: 400;
}
.tc-datatable__group th {
  padding-block: 12px;
  background: var(--tc-bg-soft);
  font-family: var(--tc-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-datatable__group span {
  position: sticky;
  left: 20px;
}
.tc-datatable__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
}
.tc-datatable__mark--yes {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-datatable__mark--no {
  color: var(--tc-muted);
  opacity: 0.6;
}
.tc-datatable__val {
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-datatable--compare .tc-datatable__table {
  min-width: 720px;
  text-align: center;
}
.tc-datatable--compare .tc-datatable__table th:not(:first-child), .tc-datatable--compare .tc-datatable__table td {
  text-align: center;
}
.tc-datatable--compare .tc-datatable__table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 220px;
  background: var(--tc-surface);
  box-shadow: 1px 0 0 var(--tc-border);
}
.tc-datatable--compare .tc-datatable__table thead th:first-child {
  background: var(--tc-surface-2);
  z-index: 2;
}
.tc-datatable--compare .tc-datatable__table .tc-datatable__group th:first-child {
  background: var(--tc-bg-soft);
}
.tc-datatable--compare .tc-datatable__table .tc-datatable__group th {
  text-align: left;
}
.tc-datatable--compare .tc-datatable__table .is-featured {
  background: color-mix(in srgb, var(--tc-primary) 7%, transparent);
}
.tc-datatable--compare .tc-datatable__table thead .is-featured {
  background: color-mix(in srgb, var(--tc-primary) 18%, transparent);
}
.tc-datatable--permissions .tc-datatable__table {
  min-width: 560px;
}

/* ---------- Guarantee strip ---------- */
.tc-guarantee {
  display: grid;
  gap: 24px;
  padding: 28px clamp(20px, 4vw, 44px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
}
@media only screen and (min-width: 768px) {
  .tc-guarantee {
    grid-template-columns: repeat(3, 1fr);
  }
}
.tc-guarantee__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.tc-guarantee__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 18px;
}
.tc-guarantee__title {
  margin: 0 0 4px;
  font-size: 17px;
}
.tc-guarantee__text {
  margin: 0;
  font-size: 14px;
}

.tc-enterprise {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-bg-soft);
}
@media only screen and (min-width: 992px) {
  .tc-enterprise {
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
  }
}
.tc-enterprise__title {
  font-size: clamp(26px, 3vw, 38px);
  margin-bottom: 14px;
}
.tc-enterprise__list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media only screen and (min-width: 576px) {
  .tc-enterprise__list {
    grid-template-columns: 1fr 1fr;
  }
}
.tc-enterprise__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 500;
  color: var(--tc-heading);
}
.tc-enterprise__list li i {
  margin-top: 5px;
  color: var(--tc-link);
}
.tc-enterprise__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.tc-datatable code {
  font-family: var(--tc-font-mono);
  font-size: 13px;
  color: var(--tc-heading);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.15 FAQ, help centre and search
/*----------------------------------------*/
/* FAQ wrapper */
.tc-faq-wrap {
  max-width: 880px;
  margin-inline: auto;
}

/* ---------- FAQ: two ledger columns ---------- */
.tc-faq-columns .tc-faq__item:first-child {
  border-top: 1px solid var(--tc-border);
}
.tc-faq-columns .tc-faq__question {
  padding-block: 22px;
  font-size: 17px;
}
@media only screen and (max-width: 991px) {
  .tc-faq-columns [class*=col-] + [class*=col-] .tc-faq__item:first-child {
    border-top: 0;
  }
}

/* ---------- Search field (FAQ hero) ---------- */
.tc-search-field {
  position: relative;
  max-width: 600px;
  margin: 32px auto 0;
}
.tc-search-field__icon {
  position: absolute;
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
  color: var(--tc-muted);
  pointer-events: none;
}
.tc-search-field__input {
  width: 100%;
  height: 58px;
  padding: 0 24px 0 54px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-sm);
  font: inherit;
  font-size: 16px;
  color: var(--tc-heading);
  transition: border-color var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-search-field__input::placeholder {
  color: var(--tc-muted);
}
.tc-search-field__input:focus {
  outline: 0;
  border-color: var(--tc-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc-primary) 25%, transparent);
}

/* ---------- Help layout: category nav + groups ---------- */
.tc-help {
  display: grid;
  gap: 32px;
}
@media only screen and (min-width: 992px) {
  .tc-help {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
}

.tc-help-nav__title {
  display: none;
  margin: 0 0 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tc-muted);
}
@media only screen and (min-width: 992px) {
  .tc-help-nav__title {
    display: block;
  }
}
.tc-help-nav__list {
  display: flex;
  gap: 8px;
  margin: 0 -12px;
  padding: 4px 12px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.tc-help-nav__list::-webkit-scrollbar {
  display: none;
}
@media only screen and (min-width: 992px) {
  .tc-help-nav__list {
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}
.tc-help-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--tc-heading);
  transition: background var(--tc-transition), color var(--tc-transition), border-color var(--tc-transition);
}
.tc-help-nav__link i {
  width: 16px;
  text-align: center;
  color: var(--tc-muted);
}
.tc-help-nav__link:hover {
  border-color: var(--tc-primary);
}
.tc-help-nav__link.is-active {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-help-nav__link.is-active i {
  color: inherit;
}
@media only screen and (min-width: 992px) {
  .tc-help-nav__link {
    padding: 12px 16px;
    border-color: transparent;
    border-radius: var(--tc-radius);
    background: transparent;
  }
  .tc-help-nav__link:hover {
    background: var(--tc-surface-2);
  }
  .tc-help-nav__link.is-active {
    background: var(--tc-surface-2);
    border-color: transparent;
    color: var(--tc-heading);
    box-shadow: inset 3px 0 0 var(--tc-primary);
  }
}
@media only screen and (min-width: 992px) {
  .tc-help-nav {
    position: sticky;
    top: calc(var(--tc-header-height) + 24px);
  }
}
@media only screen and (max-width: 991px) {
  .tc-help-nav {
    position: sticky;
    top: var(--tc-header-height);
    z-index: 5;
    padding-block: 10px;
    background: var(--tc-bg);
  }
}

.tc-help__group {
  scroll-margin-top: calc(var(--tc-header-height) + 24px);
}
.tc-help__group + .tc-help__group {
  margin-top: 56px;
}

.tc-help__heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: clamp(22px, 2.6vw, 30px);
}
.tc-help__heading i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--tc-radius);
  background: var(--tc-surface-2);
  font-size: 18px;
}

.tc-help__empty {
  padding: 32px;
  border: 1px dashed var(--tc-border);
  border-radius: var(--tc-radius-lg);
  text-align: center;
  color: var(--tc-muted);
}

.tc-help [hidden] {
  display: none;
}

.tc-helpcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 56px;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-ink);
  color: rgba(255, 255, 255, 0.72);
}
.tc-helpcard__title {
  margin: 0 0 6px;
  font-size: 22px;
  color: var(--tc-white);
}
.tc-helpcard__text {
  margin: 0;
  max-width: 460px;
}
.tc-helpcard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tc-help > * {
  min-width: 0;
}

/* ---------- shared bits ---------- */
.tc-faq__heading {
  margin: 0;
  font: inherit;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.16 Security, compliance badges and controls
/*----------------------------------------*/
/* Certification badges (CSS + Font Awesome, no trademarked logos) */
.tc-cert-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tc-cert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
  font-family: var(--tc-font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-cert i {
  color: var(--tc-accent-deep);
}
[data-theme=dark] .tc-cert i, .tc-cert[data-theme=dark] i {
  color: var(--tc-primary-bright);
}
.tc-cert__name {
  display: block;
}
.tc-cert__note {
  display: block;
  margin-top: 2px;
  font-family: var(--tc-font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--tc-muted);
}
.tc-cert--lg {
  gap: 18px;
  padding: 22px 24px;
  border-radius: var(--tc-radius-lg);
  font-size: 18px;
}
.tc-cert--lg i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--tc-radius);
  background: var(--tc-surface-2);
  font-size: 22px;
}

/* Security & compliance */
.tc-security {
  overflow: hidden;
}
.tc-security::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--tc-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--tc-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, var(--tc-black), transparent 70%);
}
.tc-security .container {
  position: relative;
}
.tc-security__certs {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}
@media only screen and (min-width: 768px) {
  .tc-security__certs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.tc-security .tc-feature-card:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--tc-primary) 40%, transparent);
  box-shadow: none;
}

/* ---------- Certification badges (CSS / Font Awesome only) ---------- */
.tc-attest {
  display: grid;
  gap: 16px 24px;
}
.tc-attest__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.tc-attest__seal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 4px;
  border: 1px solid var(--tc-border);
  border-radius: 50%;
  background: var(--tc-surface-2);
  color: var(--tc-link);
  font-size: 15px;
  outline: 1px solid var(--tc-border);
  outline-offset: 3px;
}
.tc-attest__body {
  min-width: 0;
}
.tc-attest__name {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tc-heading);
}
.tc-attest__meta {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--tc-muted);
}
.tc-attest--row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tc-attest--grid {
  grid-template-columns: 1fr;
}
@media only screen and (min-width: 576px) {
  .tc-attest--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 1201px) {
  .tc-attest--grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
  }
}

.tc-attest-panel {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}
.tc-attest-panel__label {
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-muted);
}

/* ---------- Security: shield visual ---------- */
.tc-shield {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 460px;
  margin-inline: auto;
  aspect-ratio: 1;
  overflow: hidden;
}
.tc-shield__ring {
  position: absolute;
  border-radius: 50%;
}
.tc-shield__ring--outer {
  inset: 0;
  border: 1px dashed var(--tc-muted);
  opacity: 0.45;
  animation: tc-shield-spin 80s linear infinite;
}
.tc-shield__ring--inner {
  inset: 15%;
  border: 1px solid var(--tc-border);
  background: radial-gradient(closest-side, var(--tc-surface), var(--tc-bg-soft));
  box-shadow: 0 0 0 14px color-mix(in srgb, var(--tc-ink) 2.5%, transparent);
}
.tc-shield__core {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 28%;
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
  font-size: clamp(40px, 6vw, 68px);
  box-shadow: var(--tc-shadow-lg);
}
.tc-shield__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-sm);
  font-family: var(--tc-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--tc-heading);
}
.tc-shield__chip i {
  color: var(--tc-link);
}
.tc-shield__chip--tl {
  top: 9%;
  left: 0;
}
.tc-shield__chip--tr {
  top: 21%;
  right: 0;
}
.tc-shield__chip--bl {
  bottom: 21%;
  left: 0;
}
.tc-shield__chip--br {
  bottom: 9%;
  right: 0;
}

@keyframes tc-shield-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ---------- Security: control cards ---------- */
.tc-control {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  height: 100%;
  padding: 24px;
  transition: border-color var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-control:hover {
  border-color: var(--tc-muted);
  box-shadow: var(--tc-shadow-sm);
}
.tc-control__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.tc-control__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tc-border);
  border-radius: 10px;
  background: var(--tc-surface-2);
  color: var(--tc-heading);
  font-size: 16px;
}
.tc-control__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--tc-radius-pill);
  background: rgba(22, 122, 64, 0.1);
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-success);
}
[data-theme=dark] .tc-control__status {
  color: var(--tc-success);
  background: rgba(74, 222, 128, 0.14);
}
.tc-control__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.tc-control__status--info {
  background: rgba(0, 123, 126, 0.1);
  color: var(--tc-accent-deep);
}
.tc-control__title {
  margin-bottom: 8px;
  font-size: 17px;
}
.tc-control__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.17 About page blocks
/*----------------------------------------*/
/* =========================================================
   Manifesto – large type paragraph
   ========================================================= */
.tc-manifesto__grid {
  display: grid;
  gap: 28px;
}
@media only screen and (min-width: 992px) {
  .tc-manifesto__grid {
    grid-template-columns: 180px 1fr;
    gap: 48px;
  }
}
.tc-manifesto__label {
  margin: 8px 0 0;
  font-family: var(--tc-font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tc-heading);
}
.tc-manifesto__label span {
  display: block;
  margin-bottom: 4px;
  color: var(--tc-muted);
}
.tc-manifesto__text {
  margin-bottom: 40px;
  font-size: clamp(30px, 5.2vw, 76px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.tc-manifesto__text .tc-text-serif {
  font-size: 1.08em;
  letter-spacing: -0.02em;
}
.tc-manifesto__mark {
  padding: 0 0.14em;
  border-radius: 0.12em;
  background: linear-gradient(var(--tc-primary), var(--tc-primary)) 0 70%/100% 0.8em no-repeat;
  color: var(--tc-heading);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.tc-manifesto__pill {
  display: inline-block;
  width: 1.9em;
  height: 0.74em;
  margin: 0 0.04em;
  border-radius: 999px;
  object-fit: cover;
  vertical-align: -0.04em;
}
.tc-manifesto__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--tc-heading);
}
@media only screen and (min-width: 768px) {
  .tc-manifesto__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}
.tc-manifesto__item {
  padding: 22px 0;
  border-bottom: 1px solid var(--tc-border);
}
@media only screen and (min-width: 768px) {
  .tc-manifesto__item {
    border-bottom: 0;
  }
}
.tc-manifesto__item h3 {
  margin-bottom: 6px;
  font-size: 20px;
}
.tc-manifesto__item p {
  margin: 0;
  font-size: 15px;
}
.tc-manifesto__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--tc-font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--tc-muted);
}

/* Blocks: tc-milestones  tc-values-note  tc-team-card  tc-social-links  tc-statement
           tc-profile  tc-expertise  tc-skill  tc-fact  tc-photo-strip  tc-jobs / tc-job
           tc-seal  tc-awards  tc-press  tc-hiring */
/* ---------- Milestones (vertical timeline) ---------- */
.tc-milestones {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-milestones::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
  width: 2px;
  background: var(--tc-border);
}
.tc-milestones__item {
  position: relative;
  padding: 0 0 36px 40px;
}
.tc-milestones__item:last-child {
  padding-bottom: 0;
}
.tc-milestones__dot {
  position: absolute;
  top: 6px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 3px solid var(--tc-bg);
  border-radius: 50%;
  background: var(--tc-primary);
  box-shadow: 0 0 0 2px var(--tc-border);
}
.tc-milestones__item--current .tc-milestones__dot {
  background: var(--tc-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tc-accent) 30%, transparent);
}
.tc-milestones__year {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 12px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
  font-family: var(--tc-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tc-milestones__title {
  margin-bottom: 6px;
  font-size: 20px;
}
.tc-milestones__text {
  margin: 0;
  max-width: 560px;
}
.tc-milestones__place {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--tc-muted);
}
.tc-milestones--sm .tc-milestones__item {
  padding-bottom: 28px;
}
.tc-milestones--sm .tc-milestones__title {
  font-size: 18px;
}

@media only screen and (min-width: 992px) {
  .tc-sticky {
    position: sticky;
    top: calc(var(--tc-header-height) + 32px);
  }
}

/* ---------- Statement (investor / press quote) ---------- */
.tc-statement {
  position: relative;
  margin: 0;
  text-align: center;
}
.tc-statement__mark {
  display: block;
  margin-bottom: 12px;
  font-family: var(--tc-font-serif);
  font-size: 96px;
  line-height: 0.6;
  color: var(--tc-link);
}
.tc-statement__quote {
  max-width: 900px;
  margin: 0 auto 32px;
  font-family: var(--tc-font-serif);
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--tc-heading);
}
.tc-statement__author {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.tc-statement__name {
  display: block;
  font-family: var(--tc-font-heading);
  font-weight: 700;
  color: var(--tc-heading);
}
.tc-statement__role {
  display: block;
  font-size: 14px;
  color: var(--tc-muted);
}

.tc-text-link {
  font-weight: 600;
  color: var(--tc-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tc-text-link:hover {
  color: var(--tc-heading);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.18 Customer and case-study pages
/*----------------------------------------*/
/* =========================================================
   Case studies – big hover rows with image preview
   ========================================================= */
.tc-casebook {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tc-heading);
}
.tc-casebook__row {
  position: relative;
  border-bottom: 1px solid var(--tc-border);
  transition: background var(--tc-transition);
}
@media only screen and (min-width: 992px) {
  .tc-casebook__row:hover, .tc-casebook__row:focus-within {
    background: var(--tc-primary);
  }
}
.tc-casebook__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 20px;
  padding: clamp(18px, 3vw, 36px) clamp(0px, 1.5vw, 24px);
  padding-right: 96px;
  color: var(--tc-heading);
}
@media only screen and (min-width: 992px) {
  .tc-casebook__link {
    grid-template-columns: 72px 1fr 220px 56px;
    padding-right: clamp(0px, 1.5vw, 24px);
  }
}
.tc-casebook__link:hover, .tc-casebook__link:focus-visible {
  color: var(--tc-heading);
}
.tc-casebook__link:focus-visible {
  outline-offset: -4px;
}
.tc-casebook__num {
  font-family: var(--tc-font-serif);
  font-size: 20px;
  font-style: italic;
  color: var(--tc-muted);
}
.tc-casebook__title {
  margin: 0;
  font-size: clamp(34px, 6.2vw, 88px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}
.tc-casebook__title .tc-text-serif {
  font-weight: 400;
  letter-spacing: -0.03em;
}
.tc-casebook__meta {
  grid-column: 2;
  font-size: 14px;
  color: var(--tc-text);
}
@media only screen and (min-width: 992px) {
  .tc-casebook__meta {
    grid-column: auto;
    text-align: right;
  }
}
.tc-casebook__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 3;
  grid-row: 1;
  width: 44px;
  height: 44px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 16px;
  transition: transform var(--tc-transition), background var(--tc-transition), color var(--tc-transition);
}
@media only screen and (min-width: 992px) {
  .tc-casebook__arrow {
    grid-column: auto;
    grid-row: auto;
    width: 56px;
    height: 56px;
  }
}
.tc-casebook__row:hover .tc-casebook__arrow, .tc-casebook__link:focus-visible .tc-casebook__arrow {
  background: var(--tc-ink);
  border-color: var(--tc-ink);
  color: var(--tc-primary-bright);
  transform: rotate(45deg);
}
.tc-casebook {
  /* thumbnail on small screens, floating preview on large */
}
.tc-casebook__preview {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 0;
  width: 76px;
  height: 76px;
  margin-top: -38px;
  border-radius: 16px;
  object-fit: cover;
  pointer-events: none;
}
@media only screen and (min-width: 992px) {
  .tc-casebook__preview {
    right: 22%;
    width: 300px;
    height: 200px;
    margin-top: -100px;
    border-radius: 20px;
    box-shadow: var(--tc-shadow-lg);
    opacity: 0;
    transform: translateX(40px) rotate(0deg) scale(0.88);
    transition: opacity 0.35s var(--tc-ease), transform 0.5s var(--tc-ease);
  }
}
@media only screen and (min-width: 992px) {
  .tc-casebook__row:hover .tc-casebook__preview, .tc-casebook__row:focus-within .tc-casebook__preview {
    opacity: 1;
    transform: translateX(0) rotate(-5deg) scale(1);
  }
  .tc-casebook__row:nth-child(even):hover .tc-casebook__preview, .tc-casebook__row:nth-child(even):focus-within .tc-casebook__preview {
    transform: translateX(0) rotate(4deg) scale(1);
  }
}

/* ---------- Story card (customer stories index) ---------- */
.tc-story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  transition: transform var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-story-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tc-shadow);
}
.tc-story-card:hover .tc-story-card__img {
  transform: scale(1.05);
}
.tc-story-card[hidden] {
  display: none !important;
}
.tc-story-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.tc-story-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--tc-ease);
}
.tc-story-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
}
.tc-story-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 28px;
}
.tc-story-card__company {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--tc-font-heading);
  font-weight: 700;
  color: var(--tc-heading);
}
.tc-story-card__company i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--tc-surface-2);
  font-size: 14px;
}
.tc-story-card__metric {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: clamp(40px, 4vw, 52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--tc-heading);
}
.tc-story-card__label {
  display: block;
  margin: 6px 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-link);
}
.tc-story-card__title {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.4;
}
.tc-story-card__link {
  margin-top: auto;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-story-card__link i {
  margin-left: 6px;
  transition: transform var(--tc-transition);
}
.tc-story-card__link:hover {
  color: var(--tc-link);
}
.tc-story-card__link:hover i {
  transform: translateX(4px);
}
.tc-story-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ---------- Case study: featured split + card ---------- */
.tc-case-feature {
  display: grid;
  overflow: hidden;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
}
@media only screen and (min-width: 992px) {
  .tc-case-feature {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}
.tc-case-feature__media {
  position: relative;
  min-height: 300px;
}
.tc-case-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc-case-feature__body {
  padding: clamp(28px, 4vw, 56px);
}
.tc-case-feature__title {
  margin: 16px 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.tc-case-feature__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 32px;
  padding: 20px 0;
  border-block: 1px solid var(--tc-border);
}
.tc-case-feature__metric {
  font-size: 13px;
}
.tc-case-feature__metric strong {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--tc-heading);
}

.tc-case-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  transition: transform var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-case-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tc-shadow);
}
.tc-case-card:hover .tc-case-card__img {
  transform: scale(1.05);
}
.tc-case-card[hidden] {
  display: none !important;
}
.tc-case-card__media {
  overflow: hidden;
  aspect-ratio: 16/9;
}
.tc-case-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--tc-ease);
}
.tc-case-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px 26px 26px;
}
.tc-case-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-case-card__title {
  margin-bottom: 18px;
  font-size: 19px;
  line-height: 1.35;
}
.tc-case-card__title a:hover {
  color: var(--tc-link);
}
.tc-case-card__results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: auto;
  padding: 16px 0 0;
  border-top: 1px solid var(--tc-border);
}
.tc-case-card__result {
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-case-card__result strong {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--tc-heading);
}

/* ---------- Case study details ---------- */
.tc-case-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-border);
}
@media only screen and (min-width: 768px) {
  .tc-case-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 1201px) {
  .tc-case-meta {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.tc-case-meta__item {
  padding: 22px 24px;
  background: var(--tc-surface);
}
.tc-case-meta__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-case-meta__value {
  font-family: var(--tc-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--tc-heading);
}

.tc-case-block {
  display: grid;
  gap: 24px;
}
@media only screen and (min-width: 992px) {
  .tc-case-block {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    gap: 72px;
  }
}
@media only screen and (min-width: 992px) {
  .tc-case-block__aside {
    position: sticky;
    top: calc(var(--tc-header-height) + 24px);
    align-self: start;
  }
}
.tc-case-block__index {
  display: inline-flex;
  margin-bottom: 14px;
  font-family: var(--tc-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--tc-link);
}
.tc-case-block__title {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.tc-case-block__body {
  font-size: 17px;
  line-height: 1.75;
}
.tc-case-block__body p {
  margin-bottom: 20px;
}
.tc-case-block__body .tc-checklist {
  margin-top: 8px;
}
.tc-case-block__lead {
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.5;
  color: var(--tc-heading);
}

.tc-case-nav {
  display: grid;
  gap: 20px;
}
@media only screen and (min-width: 768px) {
  .tc-case-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.tc-case-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  transition: transform var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-case-nav__link:hover {
  transform: translateY(-4px);
  box-shadow: var(--tc-shadow);
}
.tc-case-nav__link--next {
  flex-direction: row-reverse;
  text-align: right;
}
.tc-case-nav__thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 80px;
  border-radius: var(--tc-radius);
  object-fit: cover;
}
.tc-case-nav__dir {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-muted);
}
.tc-case-nav__title {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tc-heading);
}

.tc-case-shot {
  display: grid;
  gap: 16px;
}
@media only screen and (min-width: 768px) {
  .tc-case-shot {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}
.tc-case-shot__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--tc-radius-lg);
}
.tc-case-shot__item a {
  display: block;
  height: 100%;
}
.tc-case-shot__item img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  transition: transform 0.6s var(--tc-ease);
}
.tc-case-shot__item:hover img {
  transform: scale(1.05);
}

.tc-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.tc-filter-bar .tc-section-head {
  margin-bottom: 0;
}

.tc-case-feature__media img {
  object-position: 75% 60%;
}

.tc-filter-bar > div:last-child {
  min-width: 0;
  max-width: 100%;
}

.tc-filter-bar .tc-filter {
  max-width: 100%;
}
@media only screen and (max-width: 767px) {
  .tc-filter-bar .tc-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tc-filter-bar .tc-filter::-webkit-scrollbar {
    display: none;
  }
}
.tc-filter-bar .tc-filter .tc-filter__btn {
  white-space: nowrap;
}

.tc-case-meta__item:last-child {
  grid-column: span 2;
}
@media only screen and (min-width: 1201px) {
  .tc-case-meta__item:last-child {
    grid-column: auto;
  }
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.19 Team cards and member profile
/*----------------------------------------*/
/* ---------- Team card ---------- */
.tc-team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  transition: transform var(--tc-transition), box-shadow var(--tc-transition), border-color var(--tc-transition);
}
.tc-team-card:hover, .tc-team-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--tc-shadow);
  border-color: transparent;
}
.tc-team-card__media {
  position: relative;
  aspect-ratio: 4/4.4;
  overflow: hidden;
  background: var(--tc-surface-2);
}
.tc-team-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 0.6s var(--tc-ease);
}
.tc-team-card:hover .tc-team-card__img {
  transform: scale(1.05);
}
.tc-team-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 24px 24px;
}
.tc-team-card__name {
  margin-bottom: 2px;
  font-size: 19px;
}
.tc-team-card__link {
  color: inherit;
}
.tc-team-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.tc-team-card__link:focus-visible {
  outline: none;
}
.tc-team-card__link:focus-visible::after {
  outline: 3px solid var(--tc-focus);
  outline-offset: -3px;
  border-radius: var(--tc-radius-lg);
}
.tc-team-card__role {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-link);
}
.tc-team-card__text {
  margin-bottom: 18px;
  font-size: 15px;
}
.tc-team-card .tc-social-links {
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.tc-team-card--compact .tc-team-card__text {
  display: none;
}
.tc-team-card--compact .tc-team-card__body {
  padding: 18px 20px 20px;
}
.tc-team-card--compact .tc-team-card__name {
  font-size: 17px;
}

.tc-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-social-links__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--tc-border);
  border-radius: 50%;
  font-size: 14px;
  color: var(--tc-heading);
  transition: background var(--tc-transition), color var(--tc-transition), border-color var(--tc-transition);
}
.tc-social-links__link:hover {
  border-color: var(--tc-primary);
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}

/* ---------- Profile (team member) ---------- */
.tc-profile {
  display: grid;
  gap: 40px;
  align-items: start;
}
@media only screen and (min-width: 992px) {
  .tc-profile {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 72px;
  }
}
.tc-profile__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface-2);
}
@media only screen and (min-width: 992px) {
  .tc-profile__media {
    position: sticky;
    top: calc(var(--tc-header-height) + 32px);
  }
}
.tc-profile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.tc-profile__role {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-link);
}
.tc-profile__name {
  margin-bottom: 18px;
  font-size: clamp(34px, 4.5vw, 54px);
}
.tc-profile__lead {
  font-size: 18px;
  color: var(--tc-heading);
}
.tc-profile__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
}
.tc-profile__block {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--tc-border);
}
.tc-profile__subtitle {
  margin-bottom: 20px;
  font-size: 22px;
}

.tc-expertise {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-expertise__item {
  padding: 8px 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-heading);
  transition: background var(--tc-transition), border-color var(--tc-transition);
}
.tc-expertise__item:hover {
  border-color: var(--tc-primary);
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}

.tc-skill {
  margin-bottom: 20px;
}
.tc-skill:last-child {
  margin-bottom: 0;
}
.tc-skill__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-skill__value {
  font-family: var(--tc-font-mono);
  font-size: 13px;
  color: var(--tc-muted);
}

.tc-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-border);
}
@media only screen and (min-width: 768px) {
  .tc-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tc-facts__cell {
  padding: 20px 22px;
  background: var(--tc-bg);
}
.tc-facts__label {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-facts__value {
  margin: 0;
  font-family: var(--tc-font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--tc-heading);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.20 Careers: open roles and culture
/*----------------------------------------*/
/* ---------- Hiring banner ---------- */
.tc-hiring {
  position: relative;
  display: grid;
  gap: 28px;
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  overflow: hidden;
  border-radius: var(--tc-radius-xl);
  background: var(--tc-primary);
  color: color-mix(in srgb, var(--tc-on-primary) 78%, transparent);
}
@media only screen and (min-width: 768px) {
  .tc-hiring {
    grid-template-columns: 1fr auto;
  }
}
.tc-hiring__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-on-primary);
}
.tc-hiring__tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tc-on-primary);
  animation: tc-hiring-pulse 2s infinite;
}
.tc-hiring__title {
  margin-bottom: 8px;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--tc-on-primary);
}
.tc-hiring__text {
  margin: 0;
  max-width: 560px;
}

@keyframes tc-hiring-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc-on-primary) 50%, transparent);
  }
  70%, 100% {
    box-shadow: 0 0 0 10px transparent;
  }
}
/* ---------- Photo strip (life at the company) ---------- */
.tc-photo-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media only screen and (min-width: 992px) {
  .tc-photo-strip {
    grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
    gap: 20px;
    align-items: end;
  }
}
.tc-photo-strip__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--tc-radius-lg);
  aspect-ratio: 4/5;
}
@media only screen and (min-width: 992px) {
  .tc-photo-strip__item:nth-child(odd) {
    aspect-ratio: 3/4;
  }
  .tc-photo-strip__item:nth-child(even) {
    aspect-ratio: 1/1.1;
  }
}
.tc-photo-strip__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--tc-ease);
}
.tc-photo-strip__item:hover .tc-photo-strip__img {
  transform: scale(1.05);
}

/* ---------- Open roles ---------- */
.tc-jobs {
  display: grid;
  gap: 12px;
}

.tc-job {
  display: grid;
  gap: 14px 24px;
  align-items: center;
  padding: 22px 26px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  transition: border-color var(--tc-transition), box-shadow var(--tc-transition), transform var(--tc-transition);
}
@media only screen and (min-width: 992px) {
  .tc-job {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
  }
}
.tc-job:hover {
  border-color: var(--tc-heading);
  box-shadow: var(--tc-shadow-sm);
  transform: translateX(4px);
}
.tc-job__title {
  margin: 6px 0 0;
  font-size: 19px;
}
.tc-job__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  color: var(--tc-text);
}
.tc-job__meta i {
  width: 16px;
  color: var(--tc-muted);
  text-align: center;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.21 Awards, certifications and press
/*----------------------------------------*/
/* ---------- Certification seal ---------- */
.tc-seal {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 28px;
  transition: transform var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-seal:hover {
  transform: translateY(-6px);
  box-shadow: var(--tc-shadow);
}
.tc-seal__badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 96px;
  height: 96px;
  margin-bottom: 24px;
  border: 2px solid var(--tc-ink);
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-seal__badge::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed color-mix(in srgb, var(--tc-on-primary) 50%, transparent);
  border-radius: 50%;
}
.tc-seal__badge i {
  font-size: 24px;
}
.tc-seal__code {
  margin-top: 4px;
  font-family: var(--tc-font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.tc-seal__title {
  margin-bottom: 8px;
  font-size: 20px;
}
.tc-seal__text {
  margin-bottom: 20px;
  font-size: 15px;
}
.tc-seal__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 14px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-seal__status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tc-accent);
}
.tc-seal__status--progress::before {
  background: var(--tc-primary-bright);
  box-shadow: 0 0 0 1px var(--tc-border);
}
.tc-seal--accent .tc-seal__badge {
  background: var(--tc-accent);
  color: var(--tc-ink);
}
.tc-seal--accent .tc-seal__badge::before {
  border-color: rgba(19, 20, 14, 0.4);
}
.tc-seal--dark .tc-seal__badge {
  background: var(--tc-ink);
  border-color: var(--tc-ink);
  color: var(--tc-primary-bright);
}
.tc-seal--dark .tc-seal__badge::before {
  border-color: rgba(255, 255, 255, 0.35);
}

/* ---------- Awards list ---------- */
.tc-awards {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tc-border);
}

.tc-award {
  display: grid;
  gap: 8px 32px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--tc-border);
}
@media only screen and (min-width: 768px) {
  .tc-award {
    grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr);
  }
}
.tc-award__year {
  font-family: var(--tc-font-serif);
  font-size: 40px;
  line-height: 1;
  color: var(--tc-heading);
}
.tc-award__title {
  margin: 0 0 4px;
  font-size: 20px;
}
.tc-award__org {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-link);
}
.tc-award__text {
  margin: 0;
  font-size: 15px;
}

/* ---------- Press mentions ---------- */
.tc-press {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-border);
}
@media only screen and (min-width: 992px) {
  .tc-press {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.tc-press__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 28px 22px;
  background: var(--tc-bg);
  text-align: center;
}
.tc-press__outlet {
  font-family: var(--tc-font-heading);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--tc-heading);
}
.tc-press__outlet--serif {
  font-family: var(--tc-font-serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.tc-press__outlet--mono {
  font-family: var(--tc-font-mono);
  font-size: 17px;
  font-weight: 500;
}
.tc-press__outlet--caps {
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tc-press__quote {
  margin: 0;
  font-size: 14px;
}

.tc-press__item:last-child:nth-child(odd) {
  grid-column: 1/-1;
}
@media only screen and (min-width: 992px) {
  .tc-press__item:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.22 Documentation layout and callouts
/*----------------------------------------*/
/* ---------- Documentation layout ---------- */
.tc-docs {
  display: grid;
  gap: 24px;
  align-items: start;
}
@media only screen and (min-width: 992px) {
  .tc-docs {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 48px;
  }
}
@media only screen and (min-width: 1201px) {
  .tc-docs {
    grid-template-columns: 250px minmax(0, 1fr) 210px;
    gap: 56px;
  }
}
.tc-docs__side {
  min-width: 0;
}
@media only screen and (min-width: 992px) {
  .tc-docs__side {
    position: sticky;
    top: calc(var(--tc-header-height) + 24px);
    max-height: calc(100vh - var(--tc-header-height) - 48px);
    overflow-y: auto;
    padding-right: 8px;
  }
}
.tc-docs__menu {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}
@media only screen and (min-width: 992px) {
  .tc-docs__menu {
    border: 0;
    background: transparent;
  }
}
.tc-docs__menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-family: var(--tc-font-heading);
  font-weight: 600;
  color: var(--tc-heading);
  cursor: pointer;
  list-style: none;
}
.tc-docs__menu-toggle::-webkit-details-marker {
  display: none;
}
.tc-docs__menu-toggle::after {
  content: "\f078";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 12px;
  transition: transform var(--tc-transition);
}
@media only screen and (min-width: 992px) {
  .tc-docs__menu-toggle {
    display: none;
  }
}
.tc-docs__menu[open] .tc-docs__menu-toggle::after {
  transform: rotate(180deg);
}
.tc-docs__nav {
  padding: 0 20px 20px;
}
@media only screen and (min-width: 992px) {
  .tc-docs__nav {
    padding: 0;
  }
}
.tc-docs__group + .tc-docs__group {
  margin-top: 24px;
}
.tc-docs__group-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-docs__links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-docs__link {
  display: block;
  padding: 7px 12px;
  border-left: 2px solid var(--tc-border);
  font-size: 14.5px;
  color: var(--tc-text);
  transition: color var(--tc-transition), border-color var(--tc-transition);
}
.tc-docs__link:hover {
  color: var(--tc-heading);
}
.tc-docs__link.is-active {
  border-left-color: var(--tc-primary);
  color: var(--tc-heading);
  font-weight: 600;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc-primary) 14%, transparent), transparent);
}
.tc-docs__article {
  min-width: 0;
  max-width: 780px;
}
.tc-docs__eyebrow {
  display: inline-flex;
  margin-bottom: 12px;
}
.tc-docs__title {
  font-size: clamp(30px, 4vw, 44px);
  margin-bottom: 16px;
}
.tc-docs__lead {
  font-size: 18px;
  margin-bottom: 40px;
}
.tc-docs__section {
  scroll-margin-top: calc(var(--tc-header-height) + 24px);
  padding-top: 8px;
  margin-bottom: 56px;
}
.tc-docs__section h2 {
  font-size: clamp(24px, 3vw, 30px);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-docs__section h3 {
  font-size: 19px;
  margin: 32px 0 10px;
}
.tc-docs__section p, .tc-docs__section li {
  font-size: 16px;
  line-height: 1.75;
}
.tc-docs__section p {
  margin-bottom: 18px;
}
.tc-docs__section code, .tc-docs__article p code, .tc-docs__article li code {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--tc-surface-2);
  font-family: var(--tc-font-mono);
  font-size: 0.88em;
  color: var(--tc-heading);
  overflow-wrap: anywhere;
}
.tc-docs__steps {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: tc-doc-step;
}
.tc-docs__steps li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 48px;
  counter-increment: tc-doc-step;
}
.tc-docs__steps li::before {
  content: counter(tc-doc-step);
  position: absolute;
  left: 0;
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tc-ink);
  color: var(--tc-primary-bright);
  font-family: var(--tc-font-heading);
  font-size: 13px;
  font-weight: 700;
}
.tc-docs__steps li strong {
  color: var(--tc-heading);
}
.tc-docs__code {
  margin: 0 0 24px;
}
.tc-docs__code .tc-window {
  box-shadow: var(--tc-shadow-sm);
}
.tc-docs__code .tc-window__bar {
  padding: 10px 16px;
}
.tc-docs__code .tc-window__url {
  margin-inline: 0;
  max-width: none;
  text-align: left;
  background: transparent;
  font-family: var(--tc-font-mono);
}
.tc-docs__toc {
  display: none;
}
@media only screen and (min-width: 1201px) {
  .tc-docs__toc {
    display: block;
    position: sticky;
    top: calc(var(--tc-header-height) + 24px);
  }
}
.tc-docs__toc-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-docs__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--tc-border);
}
.tc-docs__toc-link {
  display: block;
  margin-left: -1px;
  padding: 6px 14px;
  border-left: 2px solid transparent;
  font-size: 14px;
  color: var(--tc-text);
}
.tc-docs__toc-link:hover {
  color: var(--tc-heading);
}
.tc-docs__toc-link.is-active {
  border-left-color: var(--tc-primary);
  color: var(--tc-heading);
  font-weight: 600;
}
.tc-docs__toc-link--sub {
  padding-left: 28px;
  font-size: 13px;
}
.tc-docs__pager {
  display: grid;
  gap: 16px;
  margin-top: 56px;
}
@media only screen and (min-width: 576px) {
  .tc-docs__pager {
    grid-template-columns: 1fr 1fr;
  }
}
.tc-docs__pager-link {
  display: block;
  padding: 20px 24px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  transition: border-color var(--tc-transition), transform var(--tc-transition);
}
.tc-docs__pager-link small {
  display: block;
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-docs__pager-link strong {
  font-family: var(--tc-font-heading);
  font-size: 17px;
  color: var(--tc-heading);
}
.tc-docs__pager-link:hover {
  border-color: var(--tc-primary);
  transform: translateY(-2px);
}
.tc-docs__pager-link--next {
  text-align: right;
}
.tc-docs__feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--tc-border);
  font-size: 15px;
  color: var(--tc-muted);
}
.tc-docs__feedback-actions {
  display: flex;
  gap: 10px;
}

.tc-doc-callout {
  --tc-doc-callout-color: var(--tc-link);
  display: flex;
  gap: 14px;
  margin: 24px 0;
  padding: 18px 20px;
  border: 1px solid var(--tc-border);
  border-left: 4px solid var(--tc-doc-callout-color);
  border-radius: 6px var(--tc-radius) var(--tc-radius) 6px;
  background: var(--tc-surface);
}
.tc-doc-callout__icon {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--tc-doc-callout-color);
}
.tc-doc-callout__body {
  min-width: 0;
  font-size: 15px;
}
.tc-doc-callout__body p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}
.tc-doc-callout__body strong {
  color: var(--tc-heading);
}
.tc-doc-callout--tip {
  --tc-doc-callout-color: var(--tc-success);
}
.tc-doc-callout--warning {
  --tc-doc-callout-color: #d68a00;
}
[data-theme=dark] .tc-doc-callout--tip {
  --tc-doc-callout-color: var(--tc-primary-bright);
}
[data-theme=dark] .tc-doc-callout--warning {
  --tc-doc-callout-color: #ffb454;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.23 Gallery
/*----------------------------------------*/
/* ---------- Gallery mosaic (CSS columns) ---------- */
.tc-photo-wall {
  column-count: 1;
  column-gap: 20px;
}
@media only screen and (min-width: 576px) {
  .tc-photo-wall {
    column-count: 2;
  }
}
@media only screen and (min-width: 992px) {
  .tc-photo-wall {
    column-count: 3;
  }
}
@media only screen and (min-width: 1400px) {
  .tc-photo-wall {
    column-count: 4;
  }
}
.tc-photo-wall__item {
  display: inline-block;
  width: 100%;
  margin: 0 0 20px;
  break-inside: avoid;
}
.tc-photo-wall__item[hidden] {
  display: none !important;
}
.tc-photo-wall__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface-2);
}
.tc-photo-wall__link:focus-visible {
  outline: 2px solid var(--tc-focus);
  outline-offset: 3px;
}
.tc-photo-wall__img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--tc-ease);
}
.tc-photo-wall__link:hover .tc-photo-wall__img {
  transform: scale(1.05);
}
.tc-photo-wall__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 12, 8, 0.78));
  opacity: 0;
  transition: opacity var(--tc-transition);
}
.tc-photo-wall__link:hover::after, .tc-photo-wall__link:focus-visible::after {
  opacity: 1;
}
.tc-photo-wall__cap {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  color: var(--tc-white);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--tc-transition), transform var(--tc-transition);
}
.tc-photo-wall__cap i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 13px;
}
.tc-photo-wall__link:hover .tc-photo-wall__cap, .tc-photo-wall__link:focus-visible .tc-photo-wall__cap {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .tc-photo-wall__cap {
    opacity: 1;
    transform: none;
  }
  .tc-photo-wall__link::after {
    opacity: 1;
  }
}

.tc-culture-note {
  display: grid;
  gap: 16px;
}
.tc-culture-note__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.tc-culture-note__item i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--tc-surface-2);
  color: var(--tc-heading);
}
.tc-culture-note__item strong {
  display: block;
  color: var(--tc-heading);
}
.tc-culture-note__item span {
  font-size: 15px;
}

.tc-photo-wall__item--tall .tc-photo-wall__img {
  aspect-ratio: 4/5;
  object-fit: cover;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.24 Contact, forms, map and free trial
/*----------------------------------------*/
.tc-read-link {
  font-weight: 600;
  color: var(--tc-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tc-form__control--select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
}

textarea.tc-form__control {
  resize: vertical;
}

/* ---------- contact ---------- */
.tc-contact-card {
  height: 100%;
  padding: 28px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  transition: transform var(--tc-transition), box-shadow var(--tc-transition);
}
.tc-contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--tc-shadow);
}
.tc-contact-card .tc-feature-card__icon {
  margin-bottom: 20px;
}
.tc-contact-card__title {
  margin-bottom: 8px;
  font-size: 20px;
}
.tc-contact-card__text {
  margin-bottom: 16px;
  font-size: 15px;
}
.tc-contact-card__link {
  font-weight: 600;
  color: var(--tc-link);
  overflow-wrap: anywhere;
}
.tc-contact-card__link:hover {
  text-decoration: underline;
}

.tc-panel-card {
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-sm);
}
.tc-panel-card__title {
  margin-bottom: 8px;
  font-size: clamp(24px, 3vw, 32px);
}
.tc-panel-card__text {
  margin-bottom: 28px;
}

.tc-contact-side {
  display: grid;
  gap: 24px;
}
.tc-contact-side__address {
  font-style: normal;
  line-height: 1.7;
}
.tc-contact-side__address strong {
  display: block;
  font-family: var(--tc-font-heading);
  color: var(--tc-heading);
}

.tc-map {
  position: relative;
  height: 300px;
  overflow: hidden;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface-2);
  background-image: linear-gradient(var(--tc-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--tc-grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
}
.tc-map__road {
  position: absolute;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
}
.tc-map__road--a {
  top: 38%;
  left: -5%;
  width: 110%;
  height: 16px;
  transform: rotate(-8deg);
}
.tc-map__road--b {
  top: -5%;
  left: 58%;
  width: 16px;
  height: 110%;
  transform: rotate(14deg);
}
.tc-map__road--c {
  top: 72%;
  left: -5%;
  width: 110%;
  height: 10px;
  transform: rotate(4deg);
}
.tc-map__road--d {
  top: -5%;
  left: 22%;
  width: 10px;
  height: 110%;
  transform: rotate(-6deg);
}
.tc-map__park {
  position: absolute;
  top: 10%;
  left: 30%;
  width: 22%;
  height: 20%;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tc-primary) 35%, transparent);
}
.tc-map__water {
  position: absolute;
  right: -8%;
  bottom: -14%;
  width: 46%;
  height: 42%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tc-accent) 18%, transparent);
}
.tc-map__pin {
  position: absolute;
  top: 40%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 22px;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--tc-primary) 30%, transparent), var(--tc-shadow);
}
.tc-map__label {
  position: absolute;
  top: calc(40% + 36px);
  left: 50%;
  padding: 4px 12px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-bg);
  transform: translateX(-50%);
  white-space: nowrap;
}

.tc-hours {
  padding: 24px 28px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}
.tc-hours__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 18px;
}
.tc-hours__list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--tc-border);
  font-size: 15px;
}
.tc-hours__list li:last-child {
  border: 0;
}
.tc-hours__list li span:first-child {
  color: var(--tc-heading);
  font-weight: 500;
}

.tc-social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.tc-social-row__label {
  font-family: var(--tc-font-heading);
  font-weight: 700;
  color: var(--tc-heading);
}
.tc-social-row__list {
  display: flex;
  gap: 8px;
}

/* ---------- free trial ---------- */
.tc-trial {
  display: grid;
  gap: 48px;
  align-items: start;
}
@media only screen and (min-width: 992px) {
  .tc-trial {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 72px;
  }
}
.tc-trial__intro {
  min-width: 0;
}
.tc-trial__title {
  margin-bottom: 8px;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.tc-trial__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.tc-trial__badges li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-trial__badges i {
  color: var(--tc-link);
}
.tc-trial__quote {
  padding: 28px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-bg-soft);
}
.tc-trial__quote blockquote {
  margin: 0 0 20px;
  font-family: var(--tc-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--tc-heading);
}
.tc-trial__quote figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}
.tc-trial__quote figcaption strong {
  display: block;
  color: var(--tc-heading);
}
.tc-trial__logos {
  margin-top: 36px;
}
.tc-trial__logos p {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-trial__logos .tc-logo-list {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px 36px;
}
.tc-trial__logos .tc-logo-list__img {
  max-height: 28px;
  width: auto;
}
.tc-trial__card {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow);
}
@media only screen and (min-width: 992px) {
  .tc-trial__card {
    position: sticky;
    top: calc(var(--tc-header-height) + 24px);
  }
}
.tc-trial__card-title {
  margin-bottom: 6px;
  font-size: 26px;
}
.tc-trial__card-text {
  margin-bottom: 24px;
}
.tc-trial__hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-trial__foot {
  margin: 22px 0 0;
  font-size: 15px;
  text-align: center;
}
.tc-trial__foot a {
  font-weight: 600;
  color: var(--tc-link);
}
.tc-trial__foot a:hover {
  text-decoration: underline;
}

.tc-form .row > .tc-form__group {
  margin-bottom: 0;
}

.tc-trial__intro .tc-section-head__tag {
  margin-bottom: 14px;
}

.tc-form .row {
  margin-bottom: 24px;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.25 Blog listing, article, sidebar widgets and comments
/*----------------------------------------*/
.tc-avatar--xl {
  width: 88px;
  height: 88px;
}

.tc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tc-tag {
  padding: 6px 14px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-text);
  transition: background var(--tc-transition), color var(--tc-transition), border-color var(--tc-transition);
}
.tc-tag:hover {
  border-color: var(--tc-primary);
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}

.tc-share {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tc-share__list, .tc-share .tc-social-row__list {
  display: flex;
  gap: 8px;
}
.tc-share__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tc-border);
  border-radius: 50%;
  background: var(--tc-surface);
  color: var(--tc-heading);
  transition: background var(--tc-transition), color var(--tc-transition), border-color var(--tc-transition);
}
.tc-share__link:hover {
  border-color: var(--tc-primary);
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}

/* ---------- blog ---------- */
.tc-blog-feature.tc-blog-card--horizontal .tc-blog-card__media {
  flex-basis: 52%;
  min-height: 300px;
}
@media only screen and (max-width: 767px) {
  .tc-blog-feature.tc-blog-card--horizontal .tc-blog-card__media {
    flex-basis: auto;
  }
}
.tc-blog-feature .tc-blog-card__body {
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
}
.tc-blog-feature .tc-blog-card__title {
  font-size: clamp(24px, 3vw, 34px);
}
.tc-blog-feature .tc-blog-card__excerpt {
  margin-bottom: 24px;
}
.tc-blog-feature__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 14px;
}
.tc-blog-feature__author strong {
  display: block;
  color: var(--tc-heading);
}
.tc-blog-feature__author small {
  color: var(--tc-muted);
  font-size: 13px;
}
@media only screen and (max-width: 767px) {
  .tc-blog-feature {
    flex-direction: column;
  }
  .tc-blog-feature .tc-blog-card__media {
    aspect-ratio: 16/10;
    min-height: 0;
  }
}

.tc-blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 32px;
}
.tc-blog-toolbar__title {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
}

.tc-pagination {
  margin-top: 56px;
}
.tc-pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.tc-pagination__link, .tc-pagination__gap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-pagination__gap {
  border: 0;
  color: var(--tc-muted);
}
.tc-pagination__link {
  background: var(--tc-surface);
  transition: background var(--tc-transition), border-color var(--tc-transition);
}
.tc-pagination__link:hover {
  border-color: var(--tc-primary);
}
.tc-pagination__link.is-active {
  border-color: var(--tc-primary);
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-pagination__link.is-disabled {
  opacity: 0.45;
}
.tc-pagination__link:focus-visible {
  outline: 2px solid var(--tc-focus);
  outline-offset: 2px;
}

.tc-blog-side {
  display: grid;
  gap: 24px;
  align-content: start;
}
@media only screen and (min-width: 992px) {
  .tc-blog-side--sticky {
    position: sticky;
    top: calc(var(--tc-header-height) + 24px);
  }
}

.tc-widget {
  padding: 28px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}
.tc-widget__title {
  margin-bottom: 18px;
  font-size: 18px;
}
.tc-widget__search {
  position: relative;
}
.tc-widget__search .tc-form__control {
  padding-right: 52px;
}
.tc-widget__search-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--tc-radius-sm);
  background: transparent;
  color: var(--tc-heading);
  cursor: pointer;
  transform: translateY(-50%);
}
.tc-widget__search-btn:hover {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-widget__list {
  display: grid;
  gap: 4px;
}
.tc-widget__list--posts {
  gap: 18px;
}
.tc-widget__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--tc-border);
  font-weight: 500;
  color: var(--tc-heading);
}
.tc-widget__cat:hover {
  color: var(--tc-link);
}
.tc-widget__count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-text);
}
.tc-widget--cta {
  background: var(--tc-inverse-bg);
  border-color: var(--tc-inverse-border);
}
.tc-widget--cta p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}
.tc-widget--cta form {
  display: grid;
  gap: 12px;
}

.tc-mini-post {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tc-mini-post__media {
  flex: 0 0 68px;
  height: 68px;
  overflow: hidden;
  border-radius: var(--tc-radius);
}
.tc-mini-post__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc-mini-post__title {
  display: block;
  margin-bottom: 4px;
  font-family: var(--tc-font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tc-heading);
}
.tc-mini-post__title:hover {
  color: var(--tc-link);
}
.tc-mini-post__meta {
  font-size: 13px;
  color: var(--tc-muted);
}

.tc-article__hero {
  margin-bottom: 40px;
  overflow: hidden;
  border-radius: var(--tc-radius-xl);
}
.tc-article__hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.tc-article__body {
  max-width: none;
}
.tc-article__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 32px;
  margin: 48px 0 0;
  padding: 24px 0;
  border-block: 1px solid var(--tc-border);
}
.tc-article__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.tc-article__label {
  font-family: var(--tc-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--tc-heading);
}

.tc-callout {
  display: flex;
  gap: 16px;
  margin: 2em 0;
  padding: 22px 24px;
  border: 1px solid var(--tc-border);
  border-left: 4px solid var(--tc-accent);
  border-radius: var(--tc-radius);
  background: var(--tc-surface-2);
  font-size: 16px;
  line-height: 1.65;
}
.tc-callout p {
  margin: 4px 0 0;
}
.tc-callout strong {
  color: var(--tc-heading);
}
.tc-callout__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}

.tc-author-box {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 40px;
  padding: 32px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-bg-soft);
}
@media only screen and (max-width: 575px) {
  .tc-author-box {
    flex-direction: column;
  }
}
.tc-author-box__label {
  margin: 0 0 2px;
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-author-box__name {
  margin-bottom: 8px;
  font-size: 22px;
}
.tc-author-box__bio {
  margin: 0;
  font-size: 15px;
}

.tc-post-nav {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}
@media only screen and (min-width: 768px) {
  .tc-post-nav {
    grid-template-columns: 1fr 1fr;
  }
}
.tc-post-nav__link {
  display: block;
  padding: 24px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  transition: border-color var(--tc-transition), transform var(--tc-transition);
}
.tc-post-nav__link:hover {
  border-color: var(--tc-primary);
  transform: translateY(-3px);
}
.tc-post-nav__link--next {
  text-align: right;
}
.tc-post-nav__dir {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-muted);
}
.tc-post-nav__title {
  font-family: var(--tc-font-heading);
  font-weight: 600;
  line-height: 1.4;
  color: var(--tc-heading);
}

.tc-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.tc-toc__link {
  display: block;
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--tc-border);
  font-size: 15px;
  color: var(--tc-text);
}
.tc-toc__link:hover {
  border-color: var(--tc-primary);
  color: var(--tc-heading);
}
.tc-toc__link--sub {
  padding-left: 30px;
  font-size: 14px;
}

.tc-discussion {
  max-width: 820px;
  margin-inline: auto;
}
.tc-discussion__title {
  margin-bottom: 28px;
  font-size: clamp(24px, 3vw, 30px);
}
.tc-discussion__list {
  display: grid;
  gap: 28px;
  margin-bottom: 64px;
}
.tc-discussion__form {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
}
.tc-discussion__form > p {
  margin-bottom: 24px;
}

.tc-comment {
  display: flex;
  gap: 18px;
}
.tc-comment--reply {
  margin-left: clamp(0px, 6vw, 64px);
}
.tc-comment__body {
  flex: 1;
  min-width: 0;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-comment__body p {
  margin-bottom: 8px;
}
.tc-comment__head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  margin-bottom: 6px;
}
.tc-comment__head strong {
  font-family: var(--tc-font-heading);
  color: var(--tc-heading);
}
.tc-comment__head time {
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-comment__reply {
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-link);
}
.tc-comment__reply:hover {
  text-decoration: underline;
}

.tc-discussion__form .tc-form .row {
  margin-bottom: 24px;
}

.tc-share__link.is-copied {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
  color: var(--tc-on-primary);
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.26 Changelog timeline
/*----------------------------------------*/
/* ---------- changelog ---------- */
.tc-changelog-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 48px;
}
.tc-changelog-bar__title {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
}

.tc-release-list {
  position: relative;
}

.tc-release {
  display: grid;
  gap: 16px;
  padding-bottom: 40px;
}
@media only screen and (min-width: 992px) {
  .tc-release {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
  }
}
.tc-release[hidden] {
  display: none;
}
.tc-release__aside {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media only screen and (min-width: 992px) {
  .tc-release__aside {
    position: sticky;
    top: calc(var(--tc-header-height) + 24px);
    flex-direction: column;
    align-items: flex-start;
    align-self: start;
    gap: 10px;
  }
}
.tc-release__date {
  font-family: var(--tc-font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-release__version {
  font-size: 13px;
  padding: 5px 14px;
}
.tc-release__main {
  position: relative;
  min-width: 0;
}
@media only screen and (min-width: 992px) {
  .tc-release__main {
    padding-left: 40px;
    border-left: 2px solid var(--tc-border);
  }
  .tc-release__main::before {
    content: "";
    position: absolute;
    top: 28px;
    left: -9px;
    width: 16px;
    height: 16px;
    border: 3px solid var(--tc-bg);
    border-radius: 50%;
    background: var(--tc-primary);
    box-shadow: 0 0 0 1px var(--tc-border);
  }
}
.tc-release__card {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}
.tc-release__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.tc-release__tag--new {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-release__tag--improved {
  background: var(--tc-surface-2);
  border: 1px solid var(--tc-border);
}
.tc-release__tag--fixed {
  background: transparent;
  border: 1px dashed var(--tc-muted);
  color: var(--tc-text);
}
.tc-release__title {
  margin-bottom: 20px;
  font-size: clamp(22px, 2.6vw, 28px);
}
.tc-release__list {
  display: grid;
  gap: 12px;
}
.tc-release__item {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.tc-release__kind {
  flex: 0 0 76px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tc-muted);
}
.tc-release__kind--new {
  color: var(--tc-link);
}
.tc-release__mock {
  margin-top: 28px;
  box-shadow: var(--tc-shadow);
}
.tc-release__flow {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 28px 16px;
  background: var(--tc-bg-soft);
  background-image: radial-gradient(var(--tc-grid-line) 1px, transparent 1px);
  background-size: 18px 18px;
}
.tc-release__node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-heading);
  text-align: center;
}
.tc-release__node--start, .tc-release__node--end {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
  color: var(--tc-on-primary);
}
.tc-release__fork {
  width: 2px;
  height: 20px;
  background: var(--tc-border);
}
.tc-release__branch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 20px 0;
  position: relative;
}
.tc-release__branch + .tc-release__node {
  margin-top: 0;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.27 Login, register and password forms
/*----------------------------------------*/
/*----------------------------------------*/
/*  Auth  .tc-auth (split login / register)  .tc-password  .tc-check  .tc-strength
/*----------------------------------------*/
.tc-auth {
  display: grid;
  min-height: 100vh;
  background: var(--tc-bg);
}
@media only screen and (min-width: 992px) {
  .tc-auth {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media only screen and (min-width: 1400px) {
  .tc-auth {
    grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  }
}
.tc-auth__brand {
  position: relative;
  display: flex;
  overflow: hidden;
  padding: calc(var(--tc-header-height) + 40px) 0 48px;
  background: var(--tc-bg);
  color: var(--tc-text);
}
@media only screen and (min-width: 992px) {
  .tc-auth__brand {
    padding: calc(var(--tc-header-height) + 56px) 0 64px;
  }
}
.tc-auth__brand-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tc-auth__brand-bg .tc-bg-glow {
  top: -18%;
  left: -12%;
}
.tc-auth__brand-bg .tc-bg-glow + .tc-bg-glow {
  top: auto;
  left: auto;
  right: -20%;
  bottom: -25%;
  opacity: 0.7;
}
.tc-auth__brand-bg .tc-bg-grid {
  mask-image: radial-gradient(ellipse 90% 80% at 30% 40%, var(--tc-black) 20%, transparent 80%);
}
.tc-auth__brand-inner {
  position: relative;
  z-index: var(--tc-z-base);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  padding: 0 24px;
}
@media only screen and (min-width: 992px) {
  .tc-auth__brand-inner {
    max-width: 560px;
    padding: 0 48px 0 24px;
  }
}
@media only screen and (min-width: 1400px) {
  .tc-auth__brand-inner {
    max-width: 640px;
  }
}
.tc-auth__tag {
  align-self: flex-start;
  margin-bottom: 20px;
}
.tc-auth__headline {
  font-family: var(--tc-font-heading);
  font-size: clamp(32px, 24.1739130435px + 2.1739130435vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--tc-heading);
  margin-bottom: 18px;
  color: var(--tc-heading);
}
.tc-auth__lead {
  max-width: 480px;
  margin-bottom: 28px;
  font-size: 17px;
}
.tc-auth__benefits {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.tc-auth__benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--tc-heading);
  font-weight: 500;
}
.tc-auth__benefit i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 10px;
}
.tc-auth__benefit small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--tc-text);
}
.tc-auth__extra {
  display: none;
}
@media only screen and (min-width: 992px) {
  .tc-auth__extra {
    display: block;
  }
}
.tc-auth {
  /* compact product mockup */
}
.tc-auth__mock {
  position: relative;
  max-width: 460px;
  padding: 20px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-lg);
}
.tc-auth__mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-auth__mock-head strong {
  font-family: var(--tc-font-heading);
  font-size: 15px;
  color: var(--tc-heading);
}
.tc-auth__mock-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.tc-auth__mock-kpi {
  padding: 10px 12px;
  border-radius: var(--tc-radius-sm);
  background: var(--tc-surface-2);
  font-size: 11px;
  color: var(--tc-muted);
}
.tc-auth__mock-kpi strong {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 20px;
  line-height: 1.2;
  color: var(--tc-heading);
}
.tc-auth__mock-kpi em {
  font-style: normal;
  font-weight: 600;
  color: var(--tc-primary-bright);
}
.tc-auth__mock-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 96px;
}
.tc-auth__mock-bar {
  flex: 1;
  height: var(--tc-value, 50%);
  border-radius: 6px 6px 2px 2px;
  background: var(--tc-surface-2);
  border: 1px solid var(--tc-border);
}
.tc-auth__mock-bar--hot {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
}
.tc-auth__mock-toast {
  position: absolute;
  right: -12px;
  bottom: -22px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface-2);
  box-shadow: var(--tc-shadow);
  font-size: 12px;
  color: var(--tc-text);
}
.tc-auth__mock-toast strong {
  display: block;
  color: var(--tc-heading);
}
.tc-auth__mock-toast i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 13px;
}
@media only screen and (max-width: 1200px) {
  .tc-auth__mock-toast {
    right: 8px;
  }
}
.tc-auth__quote {
  max-width: 480px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
}
.tc-auth__quote-text {
  margin-bottom: 18px;
  font-family: var(--tc-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tc-heading);
}
.tc-auth__quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.tc-auth__quote-author strong {
  display: block;
  color: var(--tc-heading);
}
.tc-auth__stats {
  display: flex;
  gap: 32px;
  margin-top: 28px;
  font-size: 13px;
}
.tc-auth__stats strong {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: 28px;
  line-height: 1.1;
  color: var(--tc-heading);
}
.tc-auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 72px;
  background: var(--tc-bg);
}
@media only screen and (min-width: 992px) {
  .tc-auth__panel {
    padding: calc(var(--tc-header-height) + 40px) 48px 64px;
  }
}
.tc-auth__card {
  width: 100%;
  max-width: 460px;
}
.tc-auth__title {
  margin-bottom: 8px;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.02em;
}
.tc-auth__subtitle {
  margin-bottom: 28px;
}
.tc-auth__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 24px;
  font-size: 14px;
}
.tc-auth__row a {
  font-weight: 600;
  color: var(--tc-link);
}
.tc-auth__row a:hover {
  text-decoration: underline;
}
.tc-auth__divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tc-muted);
}
.tc-auth__divider::before, .tc-auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--tc-border);
}
.tc-auth__social {
  display: grid;
  gap: 12px;
}
@media only screen and (min-width: 576px) {
  .tc-auth__social {
    grid-template-columns: 1fr 1fr;
  }
}
.tc-auth__social .tc-btn {
  font-size: 14px;
  padding-inline: 16px;
}
.tc-auth__social .tc-btn i {
  font-size: 17px;
}
.tc-auth__foot {
  margin: 28px 0 0;
  font-size: 15px;
  text-align: center;
}
.tc-auth__foot a {
  font-weight: 600;
  color: var(--tc-link);
}
.tc-auth__foot a:hover {
  text-decoration: underline;
}

.tc-password {
  position: relative;
}
.tc-password__input {
  padding-right: 52px;
}
.tc-password__toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--tc-radius-sm);
  background: transparent;
  color: var(--tc-muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--tc-transition), background var(--tc-transition);
}
.tc-password__toggle:hover {
  color: var(--tc-heading);
  background: var(--tc-surface-2);
}
.tc-password__toggle:focus-visible {
  outline: 2px solid var(--tc-focus);
  outline-offset: 0;
}

.tc-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  color: var(--tc-text);
}
.tc-check__input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  appearance: none;
  border: 1.5px solid var(--tc-muted);
  border-radius: 6px;
  background: var(--tc-surface);
  cursor: pointer;
  transition: background var(--tc-transition), border-color var(--tc-transition);
}
.tc-check__input:checked {
  border-color: var(--tc-primary);
  background: var(--tc-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2313140e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/14px no-repeat;
}
.tc-check__input:focus-visible {
  outline: 2px solid var(--tc-focus);
  outline-offset: 2px;
}
.tc-check a {
  font-weight: 600;
  color: var(--tc-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tc-strength {
  margin-top: 10px;
}
.tc-strength__bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tc-strength__bar {
  height: 6px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface-2);
  border: 1px solid var(--tc-border);
  transition: background var(--tc-transition), border-color var(--tc-transition);
}
.tc-strength__label {
  margin-top: 8px;
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-strength__label strong {
  color: var(--tc-heading);
}
.tc-strength[data-level="1"] .tc-strength__bar:nth-child(-n+1) {
  background: var(--tc-danger);
  border-color: var(--tc-danger);
}
.tc-strength[data-level="2"] .tc-strength__bar:nth-child(-n+2) {
  background: var(--tc-warning);
  border-color: var(--tc-warning);
}
.tc-strength[data-level="3"] .tc-strength__bar:nth-child(-n+3) {
  background: var(--tc-accent);
  border-color: var(--tc-accent);
}
.tc-strength[data-level="4"] .tc-strength__bar:nth-child(-n+4) {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
}

/* confirmation panel (forgot password, notify form) */
.tc-confirm {
  text-align: center;
}
.tc-confirm__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 28px;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--tc-primary) 25%, transparent);
}
.tc-confirm__title {
  margin-bottom: 12px;
  font-size: clamp(24px, 3vw, 30px);
}
.tc-confirm__text {
  margin-bottom: 24px;
}
.tc-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.tc-confirm[hidden] {
  display: none;
}

/* centered auth page (forgot password) */
.tc-centered {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  padding: calc(var(--tc-header-height) + 40px) 24px 72px;
  background: var(--tc-bg-soft);
}
.tc-centered__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tc-centered__bg .tc-bg-glow {
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
}
.tc-centered__card {
  position: relative;
  z-index: var(--tc-z-base);
  width: 100%;
  max-width: 480px;
  padding: clamp(28px, 5vw, 44px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow);
}
.tc-centered__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 22px;
}
.tc-centered__title {
  margin-bottom: 10px;
  font-size: clamp(26px, 3vw, 32px);
  letter-spacing: -0.02em;
}
.tc-centered__text {
  margin-bottom: 26px;
}
.tc-centered__foot {
  margin: 24px 0 0;
  font-size: 15px;
  text-align: center;
}
.tc-centered__foot a {
  font-weight: 600;
  color: var(--tc-link);
}
.tc-centered__foot a:hover {
  text-decoration: underline;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.28 404 and coming-soon pages
/*----------------------------------------*/
/*----------------------------------------*/
/*  404  .tc-oops
/*----------------------------------------*/
.tc-oops {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: calc(var(--tc-header-height) + clamp(40px, 7vw, 88px)) 0 var(--tc-section-space);
  background: var(--tc-bg-soft);
}
.tc-oops__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tc-oops__bg .tc-bg-glow {
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
}
.tc-oops__inner {
  position: relative;
  z-index: var(--tc-z-base);
}
.tc-oops__art {
  width: min(100%, 620px);
  height: auto;
  margin: 0 auto clamp(20px, 4vw, 40px);
  overflow: visible;
}
.tc-oops__digit {
  fill: none;
  stroke: var(--tc-heading);
  stroke-width: 34;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tc-oops__ring {
  fill: none;
  stroke: var(--tc-primary);
  stroke-width: 34;
}
.tc-oops__eye {
  fill: var(--tc-heading);
}
.tc-oops__mouth {
  fill: none;
  stroke: var(--tc-heading);
  stroke-width: 6;
  stroke-linecap: round;
}
.tc-oops__dot {
  fill: var(--tc-accent);
}
.tc-oops__spark {
  fill: none;
  stroke: var(--tc-accent);
  stroke-width: 5;
  stroke-linecap: round;
}
.tc-oops__shadow {
  fill: var(--tc-border);
}
.tc-oops__planet {
  transform-box: fill-box;
  transform-origin: center;
  animation: tc-oops-bob 5s ease-in-out infinite;
}
.tc-oops__title {
  font-family: var(--tc-font-heading);
  font-size: clamp(30px, 22.9565217391px + 1.9565217391vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--tc-heading);
  max-width: 640px;
  margin: 0 auto 14px;
}
.tc-oops__text {
  max-width: 540px;
  margin: 0 auto 32px;
  font-size: 18px;
}
.tc-oops__search {
  max-width: 520px;
  margin: 0 auto 12px;
  text-align: left;
}
.tc-oops__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.tc-oops__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.tc-oops__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface);
  font-family: var(--tc-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-heading);
  transition: border-color var(--tc-transition), transform var(--tc-transition);
}
.tc-oops__link i {
  color: var(--tc-link);
}
.tc-oops__link:hover {
  border-color: var(--tc-heading);
  transform: translateY(-2px);
}
.tc-oops__label {
  margin-top: 36px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tc-muted);
}

@keyframes tc-oops-bob {
  50% {
    transform: translateY(-10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tc-oops__planet {
    animation: none;
  }
}
/*----------------------------------------*/
/*  Coming soon  .tc-soon
/*----------------------------------------*/
.tc-soon {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: calc(var(--tc-header-height) + clamp(40px, 7vw, 88px)) 0 clamp(56px, 7vw, 96px);
  background: var(--tc-bg-soft);
}
.tc-soon__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tc-soon__bg .tc-bg-glow {
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
}
.tc-soon__inner {
  position: relative;
  z-index: var(--tc-z-base);
}
.tc-soon__title {
  font-family: var(--tc-font-heading);
  font-size: clamp(36px, 23.4782608696px + 3.4782608696vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--tc-heading);
  max-width: 860px;
  margin: 18px auto 16px;
}
.tc-soon__text {
  max-width: 600px;
  margin: 0 auto 40px;
  font-size: clamp(16px, 1.5vw, 19px);
}
.tc-soon__countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 20px);
  max-width: 700px;
  margin: 0 auto 36px;
}
.tc-soon__unit {
  padding: clamp(14px, 3vw, 28px) 4px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-sm);
}
.tc-soon__num {
  display: block;
  font-family: var(--tc-font-heading);
  font-size: clamp(32px, 7vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--tc-heading);
  font-variant-numeric: tabular-nums;
}
.tc-soon__label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tc-muted);
}
.tc-soon__date {
  margin-bottom: 36px;
  font-size: 14px;
  color: var(--tc-muted);
}
.tc-soon__date i {
  margin-right: 6px;
  color: var(--tc-link);
}
.tc-soon__progress {
  max-width: 520px;
  margin: 0 auto 44px;
  text-align: left;
}
.tc-soon__progress .tc-progress {
  height: 10px;
  border: 1px solid var(--tc-border);
}
.tc-soon__progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 14px;
}
.tc-soon__progress-head strong {
  color: var(--tc-heading);
}
.tc-soon__notify {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}
.tc-soon__notify .tc-subscribe {
  max-width: none;
}
.tc-soon__notify-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--tc-heading);
}
.tc-soon__social {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.tc-soon__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tc-border);
  border-radius: 50%;
  background: var(--tc-surface);
  color: var(--tc-heading);
  transition: background var(--tc-transition), color var(--tc-transition), transform var(--tc-transition);
}
.tc-soon__social a:hover {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  transform: translateY(-3px);
}
.tc-soon__teasers {
  text-align: left;
}

/***************************************************
 ==================== CSS INDEX =====================
 ****************************************************
 Template Name: SaaSyTech - SaaS & Tech Startup HTML5 Template
 Author: SaaSyTech
 File: main.scss (compiled to assets/css/main.css)
 Description: Entry point. Compile with
              sass --no-source-map assets/scss/main.scss assets/css/main.css
              Design tokens are CSS custom properties (light/dark + 4 palettes),
              classes follow BEM with the tc- prefix, one file per section.
 Version: 1.0.0

 01. Utils
      1.1 Variables
      1.2 Breakpoints
      1.3 Typography helpers
      1.4 Mixins & colour helpers
 02. Theme
      2.1 Colours & design tokens
      2.2 Palette presets
      2.3 Base
 03. Components
      3.1 Buttons
      3.2 Section heading
      3.3 Badge
      3.4 Avatar & avatar group
      3.5 Feature card
      3.6 Statistic
      3.7 Testimonial card
      3.8 Pricing
      3.9 FAQ accordion (behaviour: tc-main.js)
      3.10 Blog card
      3.11 Logo list / marquee ("Trusted by")
      3.12 Integration card / tile
      3.13 Process steps
      3.14 Tabs (behaviour: tc-main.js)
      3.15 Slider (Swiper skin)
      3.16 Call to action
      3.17 Window frame (wrapper for product mockups)
      3.18 Dashboard mockup
      3.19 Charts (pure CSS / inline SVG)
      3.20 AI chat / assistant mockup (image)
      3.21 Workflow / automation diagram
      3.22 Floating card (image chip)
      3.23 Forms  .tc-form  .tc-subscribe
      3.24 Chart extras (reusable data-viz pieces)
      3.25 Integration hub (ring of app tiles around a core node)
      3.26 Code / terminal
      3.27 Ruled grid (hairline-divided cells, no card chrome)
      3.28 Bento grid (mixed-size feature tiles)
      3.29 Breadcrumb
      3.30 Filter buttons (behaviour: tc-main.js)
      3.31 Prose  .tc-prose  (long-form article / legal text)
      3.32 Magnific Popup theme (plugin CSS: assets/css/magnific-popup.css)
      3.33 Preloader (markup generated by tools/sync-layout.py, hidden by tc-main.js)
 04. Header
      4.1 Header & navigation
      4.2 Offcanvas drawer
      4.3 Search overlay
 05. Footer
      5.1 Footer
 06. Sections
      6.1 Generic layout helpers shared by all homes
      6.2 Hero (base)
      6.3 Inner page hero (title + breadcrumb)
      6.4 Product showcase, dashboards, architecture and capability sections
      6.5 Integrations: orbit, hub, catalog, connectors and API
      6.6 Use cases and automation templates
      6.7 Statistics, KPI strips and revenue bands
      6.8 Customer proof: quotes, results, stories and ratings
      6.9 Feature rows, grids, lists and comparison blocks
      6.10 Process steps, timelines and rollout plans
      6.11 Call to action blocks
      6.12 Per-home scopes and overrides of shared components (header, section, window ...)
      6.13 Trusted-by logo strips
      6.14 Pricing overrides, comparison tables and guarantees
      6.15 FAQ, help centre and search
      6.16 Security, compliance badges and controls
      6.17 About page blocks
      6.18 Customer and case-study pages
      6.19 Team cards and member profile
      6.20 Careers: open roles and culture
      6.21 Awards, certifications and press
      6.22 Documentation layout and callouts
      6.23 Gallery
      6.24 Contact, forms, map and free trial
      6.25 Blog listing, article, sidebar widgets and comments
      6.26 Changelog timeline
      6.27 Login, register and password forms
      6.28 404 and coming-soon pages
      6.29 Privacy and terms layout
 ****************************************************/
/*----------------------------------------*/
/*  6.29 Privacy and terms layout
/*----------------------------------------*/
/*----------------------------------------*/
/*  Legal  .tc-legal (privacy, terms)
/*----------------------------------------*/
.tc-legal__layout {
  display: grid;
  gap: 32px;
  align-items: start;
}
@media only screen and (min-width: 992px) {
  .tc-legal__layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 64px;
  }
}
@media only screen and (min-width: 992px) {
  .tc-legal__aside {
    position: sticky;
    top: calc(var(--tc-header-height) + 24px);
  }
}
.tc-legal__toc {
  display: none;
}
@media only screen and (min-width: 992px) {
  .tc-legal__toc {
    display: block;
  }
}
.tc-legal__toc-title {
  margin-bottom: 14px;
  font-family: var(--tc-font-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tc-muted);
}
.tc-legal__toc-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: legal;
  max-height: calc(100vh - var(--tc-header-height) - 260px);
  overflow-y: auto;
}
.tc-legal__toc-link {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  border-left: 2px solid var(--tc-border);
  font-size: 14px;
  line-height: 1.4;
  color: var(--tc-text);
  transition: color var(--tc-transition), border-color var(--tc-transition), background var(--tc-transition);
}
.tc-legal__toc-link::before {
  counter-increment: legal;
  content: counter(legal, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  color: var(--tc-muted);
}
.tc-legal__toc-link:hover {
  color: var(--tc-heading);
}
.tc-legal__toc-link.is-active {
  border-left-color: var(--tc-primary);
  background: var(--tc-surface-2);
  font-weight: 600;
  color: var(--tc-heading);
}
.tc-legal__mobile-toc {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
}
@media only screen and (min-width: 992px) {
  .tc-legal__mobile-toc {
    display: none;
  }
}
.tc-legal__mobile-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-family: var(--tc-font-heading);
  font-weight: 700;
  color: var(--tc-heading);
  cursor: pointer;
  list-style: none;
}
.tc-legal__mobile-toc summary::-webkit-details-marker {
  display: none;
}
.tc-legal__mobile-toc summary::after {
  content: "\f078";
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  transition: transform var(--tc-transition);
}
.tc-legal__mobile-toc[open] summary::after {
  transform: rotate(180deg);
}
.tc-legal__mobile-toc .tc-legal__toc-list {
  padding: 0 12px 14px;
  max-height: none;
}
.tc-legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-bottom: 36px;
  padding: 16px 20px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-surface);
  font-size: 14px;
  color: var(--tc-muted);
}
.tc-legal__meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tc-legal__meta strong {
  color: var(--tc-heading);
}
.tc-legal__meta i {
  color: var(--tc-link);
}
.tc-legal__content {
  min-width: 0;
}
.tc-legal__content .tc-prose {
  max-width: 800px;
  counter-reset: legal-h;
}
.tc-legal__content .tc-prose h2 {
  counter-increment: legal-h;
}
.tc-legal__content .tc-prose h2:first-of-type {
  margin-top: 0;
}
.tc-legal__box {
  max-width: 800px;
  margin-top: 48px;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  background: var(--tc-surface-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}
.tc-legal__box--accept {
  border-color: var(--tc-primary);
  background: color-mix(in srgb, var(--tc-primary) 14%, transparent);
}
.tc-legal__box-body {
  flex: 1 1 320px;
}
.tc-legal__box-body h2, .tc-legal__box-body h3 {
  margin-bottom: 8px;
  font-size: 22px;
}
.tc-legal__box-body p {
  margin: 0;
}
.tc-legal__box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  font-size: 20px;
}
.tc-legal__box-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Small phones: pill-shaped containers whose text can wrap into 2-3 lines become rounded rectangles,
   so the second line is never squeezed into a full-radius ellipse */
@media only screen and (max-width: 575px) {
  .tc-breadcrumb__list,
  .tc-filter,
  .tc-tabs__list,
  .tc-hero__badge,
  .tc-launch__badge,
  .tc-subscribe,
  .tc-bento__query, .tc-header__inner--wrap {
    border-radius: var(--tc-radius-lg);
  }
  .tc-badge, .tc-process__chip {
    border-radius: var(--tc-radius-md, 14px);
  }
  .tc-table__status {
    white-space: nowrap;
  }
  .tc-hero__badge, .tc-launch__badge {
    align-items: center;
    text-align: left;
    text-wrap: balance;
  }
  .tc-tabs__list, .tc-filter {
    gap: 2px;
    padding: 4px;
    max-width: 100%;
  }
  .tc-tabs__tab, .tc-filter__btn {
    padding: 8px 14px;
    font-size: 13.5px;
  }
}
@media only screen and (max-width: 480px) {
  .tc-subscribe {
    flex-direction: column;
  }
  .tc-subscribe .tc-btn {
    width: 100%;
  }
  .tc-subscribe .tc-subscribe__input {
    padding: 12px 14px;
  }
}