@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

/* Ticnob brand tokens and parity values consumed by TicFrame utilities. */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #1957d6;
  --color-accent-2: #0b1f4d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;
  --color-accent-100: #eff4fe;
  --color-accent-200: #dbe7fd;
  --color-accent-300: #bcd2fa;
  --color-accent-400: #8cafef;
  --color-accent-500: #4a7fe3;
  --color-accent-600: #1957d6;
  --color-accent-700: #123f9e;
  --color-accent-800: #0b1f4d;
  --color-accent-900: #081536;
  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
  --tf-color-primary: var(--color-accent);
  --tf-color-primary-hover: var(--color-accent-700);
  --tf-color-on-primary: var(--color-bg);
  --tf-color-primary-soft: var(--color-accent-100);
  --tf-color-primary-border: var(--color-accent-400);
  --tf-surface-base: var(--color-bg);
  --tf-surface-raised: var(--color-surface);
  --tf-surface-overlay: var(--color-bg);
  --tf-surface-inset: var(--color-neutral-200);
  --tf-text-main: var(--color-text);
  --tf-text-muted: var(--color-neutral-700);
  --tf-text-inverse: #fff;
  --tf-border-default: var(--color-divider);
  --tf-border-strong: color-mix(in srgb, var(--color-text) 62%, transparent);
  --tf-font-heading: var(--font-heading);
  --tf-font-body: var(--font-body);
  --tf-font-sans: var(--font-body);
  --tf-radius-2: 0;
  --tf-radius-4: 0;
  --tf-radius-5: 0;
  --tf-radius-6: 0;
  --tf-shadow-1: var(--shadow-sm);
  --tf-shadow-2: var(--shadow-md);
  --tf-shadow-3: var(--shadow-lg);
}
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 800; letter-spacing: 0; }
.grayscale { filter: grayscale(1) contrast(1.08); }
.tn-ui-shell { min-height: 100vh; background: var(--color-bg); }
.tn-util { background: var(--color-accent-900); }
.tn-util-inner {
  max-width: 1280px; margin: 0 auto; padding: 8px 40px;
  display: flex; justify-content: flex-end; gap: 28px; font-size: 12px;
}
.tn-util a { color: rgba(255,255,255,.78); text-decoration: none; }
.tn-util a:hover { color: #fff; }
.tn-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-weight: 800; font-size: 20px;
  letter-spacing: 0; color: inherit; text-decoration: none;
}
.tn-header { position: sticky; top: 0; z-index: var(--tf-z-dropdown); }
.tn-header .tf-navbar { min-block-size: 72px; }
.tn-header-actions { display: flex; gap: 16px; align-items: center; }
.tn-header-actions a:first-child {
  color: inherit; text-decoration: none; font-size: 14px; padding: 8px 4px; white-space: nowrap;
}
.tn-footer { background: var(--color-accent-900); color: #fff; }
.tn-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.tn-footer a:hover { color: #fff; }
.tn-footer-top { max-width: 1280px; margin: 0 auto; padding: 72px 40px 48px; }
.tn-footer-cta {
  display: flex; justify-content: space-between; gap: 32px; align-items: end;
  border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 48px; margin-bottom: 48px;
}
.tn-footer-grid { display: grid; grid-template-columns: 1.2fr 2fr; gap: 64px; }
.tn-footer-brand { max-width: 320px; }
.tn-footer-brand strong { display: flex; align-items: center; gap: 12px; font-family: var(--font-heading); font-weight: 800; font-size: 20px; }
.tn-footer-brand p { color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.6; margin-top: 16px; }
.tn-footer-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
.tn-footer-col h5 { color: #fff; margin-bottom: 12px; }
.tn-footer-col div { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.tn-footer-bottom {
  max-width: 1280px; margin: 0 auto; padding: 18px 40px;
  display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.72); font-size: 12px;
}
.tn-footer-bottom nav { display: flex; gap: 16px; flex-wrap: wrap; }
.tn-footer-bottom a { color: rgba(255,255,255,.72); }
.tn-brand-rule { height: 2px; border: 0; margin: 16px 0; background: var(--color-divider); }

@media (max-width: 1023px) {
  .tn-util { display: none; }
  .tn-header-actions { margin-top: 16px; align-items: stretch; flex-direction: column; }
  .tn-footer-grid, .tn-footer-cols, .tn-footer-cta, .tn-footer-bottom { grid-template-columns: 1fr; display: grid; }
  section > div[style*="grid-template-columns"],
  main > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 599px) {
  h1, h1[style] { font-size: 36px !important; }
  h2, h2[style] { font-size: 30px !important; }
  section > div[style*="padding:72px 40px"],
  section > div[style*="padding:64px 40px"],
  section > div[style*="padding:88px 40px"],
  section > div[style*="padding:96px 40px"] { padding: 48px 20px !important; }
  div[style*="display:flex;gap:12px"] { flex-wrap: wrap; }
  .tf-btn { white-space: normal !important; text-align: left; }
}