/* ==========================================================================
   TechPro IT Solutions — SIGNAL design system
   Ported by hand from the Claude Design "TPIT Marketing" kit (direction: Signal)
   into the production Jinja/HTMX site. Cool near-black base · electric cyan
   signal accent · brand blue actions. Self-hosted fonts. Dark only.
   ========================================================================== */

/* ------------------------------------------------------------------ Fonts -- */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/SpaceGrotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/SpaceGrotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/SpaceGrotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/SpaceGrotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/HankenGrotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/HankenGrotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/HankenGrotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/HankenGrotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/HankenGrotesk-800.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/JetBrainsMono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/JetBrainsMono-500.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/JetBrainsMono-600.woff2") format("woff2"); }

/* ----------------------------------------------------------------- Tokens -- */
:root {
  /* Ink (cool near-black base + surfaces) */
  --ink-950: #05070c; --ink-900: #080a0f; --ink-850: #0c0f17;
  --ink-800: #10141d; --ink-700: #161d29; --ink-600: #1f2836;
  /* Cyan (electric signal accent) */
  --cyan-300: #7defe6; --cyan-400: #35e0d8; --cyan-500: #15c4bb; --cyan-600: #0f9d95;
  /* Blue (primary action + links) */
  --blue-300: #9db8ff; --blue-400: #6f97ff; --blue-500: #4f7dff; --blue-600: #3660e6;
  /* Neutral text */
  --paper: #eef2fb; --slate-200: #dbe2f0; --slate-300: #c0c9db;
  --slate-400: #828da4; --slate-500: #5a6478; --white: #ffffff;
  /* Alpha helpers */
  --line-soft: rgba(125,160,255,0.10); --line-hard: rgba(255,255,255,0.14);
  --fill-soft: rgba(255,255,255,0.05); --cyan-glow: rgba(53,224,216,0.16);
  --blue-glow: rgba(79,125,255,0.16); --accent-ring: rgba(53,224,216,0.30);
  --selection: rgba(79,125,255,0.32);
  /* Semantic aliases */
  --bg-page: var(--ink-900); --bg-page-deep: var(--ink-950); --bg-section-alt: var(--ink-850);
  --surface-card: var(--ink-800); --surface-raised: var(--ink-700); --surface-chip: var(--fill-soft);
  --text-heading: var(--paper); --text-body: var(--slate-300); --text-muted: var(--slate-400);
  --text-faint: var(--slate-500); --text-link: var(--blue-300); --text-link-hover: var(--white);
  --text-accent: var(--cyan-400);
  --border-card: var(--line-soft); --border-strong: var(--line-hard); --border-hover: rgba(53,224,216,0.45);
  --action-primary: var(--blue-500); --action-primary-hover: var(--blue-400); --action-primary-active: var(--blue-600);
  --action-blue: var(--blue-500); --action-blue-hover: var(--blue-400);
  --action-on: var(--white); --accent-ink: #04201e; --focus-ring: var(--cyan-400);

  /* Typography */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;
  --fs-eyebrow: 0.75rem; --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem;
  --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem; --fs-5xl: 3.5rem;
  --lh-tight: 1.03; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7;
  --ls-eyebrow: 0.22em; --ls-wide: 0.08em; --ls-tight: -0.02em; --ls-tighter: -0.03em;
  --text-hero-size: clamp(2.5rem, 5.6vw, 3.5rem);
  --text-h2-size: clamp(1.75rem, 3.5vw, 2.25rem);
  --text-h3-size: var(--fs-xl);

  /* Spacing / radii / layout */
  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem; --sp-32:8rem;
  --section-y: clamp(4rem, 9vw, 8rem);
  --radius-sm:0.5rem; --radius-md:0.625rem; --radius-lg:0.75rem; --radius-xl:1rem;
  --radius-2xl:1.25rem; --radius-3xl:1.5rem; --radius-pill:9999px;
  --container-max:80rem; --container-pad:1.5rem; --container-pad-lg:2rem;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.62);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.68);
  --shadow-glow: 0 0 0 1px rgba(53,224,216,0.22), 0 18px 50px -14px rgba(53,224,216,0.24), 0 10px 24px -12px rgba(0,0,0,0.6);
  --shadow-cta: 0 16px 44px -14px rgba(79,125,255,0.55);
  --shadow-blue: 0 16px 44px -14px rgba(79,125,255,0.5);
  --shadow-frame: 0 0 0 1px rgba(53,224,216,0.16), 0 30px 80px -26px rgba(0,0,0,0.65);
  --glow-accent: radial-gradient(58% 70% at 86% 10%, rgba(53,224,216,0.16), transparent 62%);
  --glow-blue: radial-gradient(46% 50% at 8% 72%, rgba(79,125,255,0.16), transparent 68%);
  --glow-accent-top: radial-gradient(60% 55% at 50% 0%, rgba(53,224,216,0.09), transparent 72%);
  --grad-mark: linear-gradient(135deg, #4f7dff, #35e0d8);
  --grad-blue: linear-gradient(135deg, #3660e6, #4f7dff);
  --hairline: linear-gradient(90deg, rgba(53,224,216,0.5), rgba(255,255,255,0));
  --grid-line: rgba(125,160,255,0.05); --grid-size: 46px;
  --ease-out: cubic-bezier(0.22,1,0.36,1); --ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:140ms; --dur:240ms; --dur-slow:420ms; --lift:-4px; --press:1px;
}

/* ------------------------------------------------------------------- Base -- */
html { scroll-behavior: smooth; }
body {
  margin: 0; background-color: var(--bg-page); color: var(--text-body);
  font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
::selection { background: var(--selection); color: var(--paper); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Signature // 01 — SECTION eyebrow (element + component forms) */
.tp-eyebrow, .tp-eyebrow-c {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-accent);
}
.tp-eyebrow::before, .tp-eyebrow-c::before { content: "//"; color: var(--blue-400); }
.tp-eyebrow-c .tp-eyebrow-num { color: var(--blue-300); }
.tp-eyebrow-c .tp-eyebrow-sep { color: var(--text-faint); }

/* Badge pill */
.tp-badge, .tp-badge-c {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border-radius: var(--radius-pill); border: 1px solid var(--line-hard); background: var(--fill-soft);
  padding: 0.3rem 0.8rem; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted);
}
.tp-badge-c .tp-badge-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--text-accent); box-shadow: 0 0 0 3px rgba(53,224,216,0.18); }
.tp-badge-c--blue .tp-badge-dot { background: var(--blue-400); box-shadow: 0 0 0 3px rgba(90,134,255,0.18); }

.tp-h-display { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--text-heading); line-height: var(--lh-tight); }
.tp-grid-bg { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); }

/* Long-form prose (service / industry / location / KB body) */
.prose-dark { color: var(--text-body); line-height: var(--lh-relaxed); }
.prose-dark h2 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-heading); margin: var(--sp-8) 0 var(--sp-3); letter-spacing: var(--ls-tight); }
.prose-dark h3 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-heading); margin: var(--sp-6) 0 var(--sp-2); }
.prose-dark p { margin: 0 0 var(--sp-4); }
.prose-dark ul { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.prose-dark ul li { position: relative; padding-left: var(--sp-6); margin-bottom: var(--sp-2); }
.prose-dark ul li::before { content: "→"; position: absolute; left: 0; color: var(--text-accent); }
.prose-dark a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.prose-dark a:hover { color: var(--text-link-hover); }
.prose-dark strong { color: var(--text-heading); font-weight: var(--fw-semibold); }

/* Motion system — reveal on load; visible end-state is base so no-JS/reduced-motion show content */
@keyframes tp-rise { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }
@keyframes tp-fade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { animation: tp-rise var(--dur-slow) var(--ease-out) both; animation-delay: var(--reveal-delay, 0ms); }
}

/* ----------------------------------------------------------------- Layout -- */
.k-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.k-section { padding: var(--section-y) 0; }
.k-section--alt { background: var(--bg-section-alt); border-block: 1px solid var(--border-card); }
.k-section--tight { padding: calc(var(--section-y) * 0.62) 0; }

.k-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-hero-size); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); color: var(--text-heading); margin: 1.1rem 0 0; }
.k-h1 .hl { color: var(--text-accent); }
.k-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h2-size); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0.75rem 0 0; }
.k-h2 .hl { color: var(--text-accent); }
.k-lead { font-family: var(--font-body); font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--slate-300); margin: 1.25rem 0 0; max-width: 46ch; }
.k-sub { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-muted); margin: 0.9rem 0 0; max-width: 54ch; }
.k-center { text-align: center; }
.k-center .k-lead, .k-center .k-sub { margin-inline: auto; }
.k-sechead { margin-bottom: var(--sp-10); }

.k-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.k-center .k-actions { justify-content: center; }

.k-trust { list-style: none; padding: 0; margin: var(--sp-8) 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.k-trust li::before { content: "▸ "; color: var(--text-accent); }

/* Scrim image — dark gradient over a photo so it sits on near-black */
.k-scrimimg { position: relative; overflow: hidden; border-radius: var(--radius-2xl); background: var(--ink-800); }
.k-scrimimg img { width: 100%; height: 100%; object-fit: cover; }
.k-scrim { position: absolute; inset: 0; pointer-events: none; }
.k-scrim--soft { background: linear-gradient(180deg, rgba(8,10,15,0.10) 0%, rgba(8,10,15,0.02) 40%, rgba(8,10,15,0.45) 100%); }
.k-scrim--strong { background: linear-gradient(180deg, rgba(8,10,15,0.30) 0%, rgba(8,10,15,0.15) 45%, rgba(8,10,15,0.72) 100%); }
.k-scrim--side { background: linear-gradient(90deg, rgba(8,10,15,0.55) 0%, rgba(8,10,15,0.05) 55%, rgba(8,10,15,0.0) 100%); }

/* Interior page hero */
.k-pagehero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-card); padding: clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem); background: var(--glow-accent), var(--glow-blue), var(--bg-page); }
.k-pagehero-grid { position: absolute; inset: 0; opacity: 0.6; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); -webkit-mask-image: radial-gradient(75% 80% at 78% 12%, #000, transparent 72%); mask-image: radial-gradient(75% 80% at 78% 12%, #000, transparent 72%); }
.k-pagehero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.k-pagehero--minimal .k-pagehero-inner { grid-template-columns: 1fr; max-width: 60rem; }
.k-pagehero-copy { min-width: 0; }
.k-crumbs-wrap { margin-bottom: var(--sp-5); }

/* Grids */
.k-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6); }
.k-services { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
.k-features { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6) var(--sp-8); }
.k-tags { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.k-two { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
.k-prose { max-width: 44rem; }
.k-prose.prose-dark { font-size: var(--fs-base); }
.k-card { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-2xl); }
.k-card--pad { padding: var(--sp-6); }
.k-aside { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-2xl); padding: var(--sp-6); }

@media (max-width: 860px) { .k-pagehero-inner, .k-two { grid-template-columns: 1fr; } .k-pillars, .k-services, .k-features { grid-template-columns: 1fr 1fr; } .k-pagehero-aside { margin-top: var(--sp-6); } }
@media (max-width: 620px) { .k-pillars, .k-services, .k-features { grid-template-columns: 1fr; } }
/* Mobile overflow fix: several templates set grid-template-columns INLINE, which beats the
   responsive rules above (inline styles outrank stylesheet media queries). Force the collapse. */
@media (max-width: 860px) { .k-two { grid-template-columns: 1fr !important; } }
@media (max-width: 620px) { .tp-posts { grid-template-columns: 1fr !important; } }

/* --------------------------------------------------------------- Buttons -- */
.tp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-sm);
  line-height: 1; letter-spacing: 0.01em; white-space: nowrap; border: 1px solid transparent;
  border-radius: var(--radius-md); padding: 0.875rem 1.375rem; cursor: pointer; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.tp-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tp-btn:active { transform: translateY(var(--press)); }
.tp-btn .tp-btn-ico { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.tp-btn--sm { padding: 0.625rem 1rem; font-size: var(--fs-xs); border-radius: var(--radius-sm); }
.tp-btn--lg { padding: 1.05rem 1.75rem; font-size: var(--fs-base); }
.tp-btn--primary { background-color: var(--action-primary); color: var(--action-on); }
.tp-btn--primary:hover { background-color: var(--action-primary-hover); box-shadow: var(--shadow-cta); transform: translateY(var(--lift)); }
.tp-btn--blue { background-color: var(--action-blue); color: #fff; }
.tp-btn--blue:hover { background-color: var(--action-blue-hover); box-shadow: var(--shadow-blue); transform: translateY(var(--lift)); }
.tp-btn--ghost { background: transparent; color: var(--text-heading); border-color: var(--line-hard); }
.tp-btn--ghost:hover { border-color: var(--border-hover); background: var(--fill-soft); }
.tp-btn--subtle { background: var(--surface-chip); color: var(--text-heading); border-color: var(--line-soft); }
.tp-btn--subtle:hover { background: var(--surface-raised); border-color: var(--border-hover); }
.tp-btn[disabled], .tp-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; }

/* ------------------------------------------------------------- ArrowLink -- */
.tp-arrowlink { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--text-link); text-decoration: none; cursor: pointer; transition: color var(--dur) var(--ease-out), gap var(--dur) var(--ease-out); }
.tp-arrowlink .tp-arrowlink-ico { width: 1em; height: 1em; transition: transform var(--dur) var(--ease-out); }
.tp-arrowlink:hover { color: var(--text-link-hover); gap: 0.7rem; }
.tp-arrowlink:hover .tp-arrowlink-ico { transform: translateX(2px); }
.tp-arrowlink--mono { font-family: var(--font-mono); font-weight: var(--fw-medium); font-size: var(--fs-xs); letter-spacing: 0.05em; text-transform: uppercase; }

/* ------------------------------------------------------------------ Logo -- */
.tp-logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.tp-logo-mark { width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; display: grid; place-items: center; background-image: var(--grad-mark); color: var(--accent-ink); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 0.85rem; letter-spacing: -0.02em; box-shadow: 0 6px 18px -8px rgba(79,125,255,0.6); }
.tp-logo-word { line-height: 1.02; display: flex; flex-direction: column; }
.tp-logo-word b { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.02rem; color: var(--text-heading); letter-spacing: -0.01em; }
.tp-logo-word span { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.28em; color: var(--text-muted); text-transform: uppercase; margin-top: 0.05rem; }
.tp-logo--sm .tp-logo-mark { width: 1.9rem; height: 1.9rem; font-size: 0.72rem; }
.tp-logo--sm .tp-logo-word b { font-size: 0.9rem; }

/* -------------------------------------------------------------- Navbar --- */
.tp-nav { position: sticky; top: 0; z-index: 50; background: rgba(11,16,23,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-card); }
.tp-nav-inner { max-width: var(--container-max); margin: 0 auto; padding: 0.85rem var(--container-pad); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.tp-nav-links { display: flex; align-items: center; gap: 1.6rem; }
.tp-nav-link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--slate-200); text-decoration: none; cursor: pointer; transition: color var(--dur) var(--ease-out); background: none; border: 0; font-family: var(--font-body); }
.tp-nav-link:hover, .tp-nav-link[aria-current="page"] { color: var(--text-heading); }
.tp-nav-link svg { width: 0.85rem; height: 0.85rem; opacity: 0.7; transition: transform var(--dur) var(--ease-out); }
.tp-nav-item { position: relative; }
.tp-nav-item[data-open] .tp-nav-link svg { transform: rotate(180deg); }
.tp-nav-panel { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; width: 19rem; border-radius: var(--radius-2xl); border: 1px solid var(--border-card); background: rgba(12,15,23,0.97); backdrop-filter: blur(12px); box-shadow: var(--shadow-lg); padding: 0.5rem; }
.tp-nav-panel[hidden] { display: none; }
.tp-nav-panel a { display: block; border-radius: var(--radius-lg); padding: 0.65rem 0.9rem; color: var(--slate-300); text-decoration: none; font-size: var(--fs-sm); transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.tp-nav-panel a:hover { background: var(--fill-soft); color: var(--text-heading); }
.tp-nav-panel a.head { color: var(--text-heading); font-family: var(--font-display); font-weight: var(--fw-semibold); }
.tp-nav-panel a.head span { display: block; margin-top: 0.1rem; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); }
.tp-nav-panel .sep { height: 1px; background: var(--border-card); margin: 0.35rem 0.4rem; }
.tp-nav-right { display: flex; align-items: center; gap: var(--sp-5); }
.tp-nav-login { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--slate-200); text-decoration: none; }
.tp-nav-login:hover { color: var(--text-heading); }
.tp-nav-toggle { display: none; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); border: 1px solid var(--line-hard); background: var(--fill-soft); color: var(--text-heading); cursor: pointer; }
.tp-nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.tp-nav-mobile { display: none; flex-direction: column; gap: 0.2rem; padding: var(--sp-4) var(--container-pad) var(--sp-6); border-top: 1px solid var(--border-card); }
.tp-nav-mobile > a { padding: 0.7rem 0.5rem; color: var(--slate-200); text-decoration: none; border-radius: var(--radius-sm); font-weight: var(--fw-medium); }
.tp-nav-mobile > a:hover { background: var(--fill-soft); color: var(--text-heading); }
.tp-nav-mobile details summary { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.5rem; cursor: pointer; list-style: none; color: var(--slate-200); font-weight: var(--fw-medium); }
.tp-nav-mobile details summary::-webkit-details-marker { display: none; }
.tp-nav-mobile details summary svg { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease-out); }
.tp-nav-mobile details[open] summary svg { transform: rotate(180deg); }
.tp-nav-mobile details .sub { padding: 0 0 0.5rem 0.75rem; margin-left: 0.35rem; border-left: 1px solid var(--border-card); display: flex; flex-direction: column; }
.tp-nav-mobile details .sub a { padding: 0.45rem 0.5rem; color: var(--slate-400); text-decoration: none; font-size: var(--fs-sm); }
.tp-nav-mobile details .sub a:hover { color: var(--text-heading); }
.tp-nav-mobile .m-cta { margin-top: 0.6rem; }
@media (max-width: 900px) {
  .tp-nav-links, .tp-nav-login { display: none; }
  .tp-nav-toggle { display: inline-flex; }
  .tp-nav-mobile.open { display: flex; }
  .tp-nav-cta-desktop { display: none; }
}

/* ------------------------------------------------------------- Footer ---- */
.tp-footer { background: var(--bg-page-deep); border-top: 1px solid var(--border-card); }
.tp-footer-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--sp-16) var(--container-pad) var(--sp-8); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-10); }
.tp-footer-about { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-normal); margin: var(--sp-4) 0 0; max-width: 30ch; }
.tp-footer-col h4 { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 var(--sp-4); font-weight: var(--fw-medium); }
.tp-footer-col h4.mt { margin-top: var(--sp-6); }
.tp-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.tp-footer-col ul.areas { flex-direction: row; flex-wrap: wrap; gap: 0.4rem 1rem; }
.tp-footer-col a { color: var(--slate-300); text-decoration: none; font-size: var(--fs-sm); transition: color var(--dur) var(--ease-out); }
.tp-footer-col ul.areas a { color: var(--slate-400); font-size: var(--fs-xs); }
.tp-footer-col a:hover { color: var(--text-heading); }
.tp-footer-cta p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); max-width: 22ch; }
.tp-footer-phone { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--sp-4); font-family: var(--font-mono); font-weight: var(--fw-medium); color: var(--text-heading); text-decoration: none; font-size: var(--fs-sm); }
.tp-footer-phone svg { width: 1rem; height: 1rem; color: var(--text-accent); }
.tp-footer-bar { border-top: 1px solid var(--border-card); }
.tp-footer-bar-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--sp-5) var(--container-pad); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-faint); }
@media (max-width: 800px) { .tp-footer-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } .tp-footer-brand { grid-column: 1 / -1; } }

/* -------------------------------------------------------- Pillar / cards -- */
.tp-pillar { position: relative; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-2xl); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); text-decoration: none; }
.tp-pillar:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-glow); border-color: var(--border-hover); }
.tp-pillar .k-scrimimg { border-radius: 0; }
.tp-pillar-media { aspect-ratio: 16/10; overflow: hidden; }
.tp-pillar-media img { transition: transform var(--dur-slow) var(--ease-out); }
.tp-pillar:hover .tp-pillar-media img { transform: scale(1.05); }
.tp-pillar-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.tp-pillar-num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-accent); letter-spacing: 0.1em; }
.tp-pillar-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-xl); color: var(--text-heading); letter-spacing: var(--ls-tight); margin: 0; }
.tp-pillar-desc { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-normal); margin: 0; flex: 1; }
.tp-pillar-foot { margin-top: var(--sp-3); }

/* ------------------------------------------------------------- Feature --- */
.tp-feature { display: flex; gap: var(--sp-3); align-items: flex-start; }
.tp-feature-ico { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; display: grid; place-items: center; background: rgba(53,224,216,0.12); border: 1px solid rgba(53,224,216,0.25); color: var(--text-accent); }
.tp-feature-ico svg { width: 1rem; height: 1rem; }
.tp-feature-body { display: flex; flex-direction: column; gap: 0.25rem; }
.tp-feature-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--text-heading); margin: 0; letter-spacing: var(--ls-tight); }
.tp-feature-desc { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-normal); margin: 0; }

/* ----------------------------------------------------------------- CTA ---- */
.tp-cta { position: relative; overflow: hidden; text-align: center; border: 1px solid var(--border-card); border-radius: var(--radius-3xl); padding: clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,5vw,4rem); background: radial-gradient(60% 120% at 50% 0%, rgba(53,224,216,0.12), transparent 60%), radial-gradient(70% 130% at 50% 120%, rgba(79,125,255,0.16), transparent 60%), var(--ink-850); }
.tp-cta::before { content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 75%); }
.tp-cta > * { position: relative; }
.tp-cta-title { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--text-heading); font-size: var(--text-h2-size); line-height: var(--lh-snug); margin: 0 auto; max-width: 20ch; }
.tp-cta-sub { color: var(--text-muted); font-size: var(--fs-lg); line-height: var(--lh-normal); margin: var(--sp-4) auto 0; max-width: 46ch; }
.tp-cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-8); }

/* ------------------------------------------------------------ GlowFrame -- */
.tp-glowframe { position: relative; padding: 2px; border-radius: var(--radius-3xl); background: linear-gradient(150deg, rgba(53,224,216,0.55), rgba(79,125,255,0.30) 55%, rgba(53,224,216,0.10)); box-shadow: var(--shadow-frame); }
.tp-glowframe-inner { position: relative; border-radius: calc(var(--radius-3xl) - 2px); overflow: hidden; }
.tp-glowframe-inner .k-scrimimg { border-radius: 0; }
.tp-glowframe-corner { position: absolute; width: 16px; height: 16px; z-index: 3; border: 2px solid rgba(53,224,216,0.75); }
.tp-glowframe-corner.tl { left: 12px; top: 12px; border-right: 0; border-bottom: 0; }
.tp-glowframe-corner.tr { right: 12px; top: 12px; border-left: 0; border-bottom: 0; }
.tp-glowframe-corner.bl { left: 12px; bottom: 12px; border-right: 0; border-top: 0; }
.tp-glowframe-corner.br { right: 12px; bottom: 12px; border-left: 0; border-top: 0; }
.tp-glowframe-chip { position: absolute; left: 16px; bottom: 16px; z-index: 3; background: rgba(11,16,23,0.72); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 0.6rem 0.8rem; backdrop-filter: blur(6px); }
.tp-glowframe-chip .k { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; color: var(--text-accent); text-transform: uppercase; }
.tp-glowframe-chip .v { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-heading); font-size: 0.95rem; margin-top: 0.1rem; }

/* -------------------------------------------------------- Accordion (FAQ) -- */
.tp-accordion { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-xl); padding: 1.1rem 1.25rem; transition: border-color var(--dur) var(--ease-out); }
.tp-accordion + .tp-accordion { margin-top: var(--sp-3); }
.tp-accordion[open] { border-color: var(--border-hover); }
.tp-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--text-heading); }
.tp-accordion summary::-webkit-details-marker { display: none; }
.tp-accordion summary svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; color: var(--text-accent); transition: transform var(--dur) var(--ease-out); }
.tp-accordion[open] summary svg { transform: rotate(45deg); }
.tp-accordion-body { margin-top: 0.85rem; color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

/* ---------------------------------------------------------- Tag-link pill -- */
.tp-taglink { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border-card); background: var(--fill-soft); padding: 0.5rem 0.9rem; font-size: var(--fs-sm); color: var(--slate-300); text-decoration: none; transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.tp-taglink::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--text-accent); flex: 0 0 auto; }
.tp-taglink:hover { border-color: var(--border-hover); color: var(--text-heading); }
.tp-taglink--all { color: var(--blue-300); border-color: rgba(79,125,255,0.4); background: rgba(79,125,255,0.10); }
.tp-taglink--all::before { display: none; }
.tp-taglink--all:hover { background: rgba(79,125,255,0.18); color: var(--white); }

/* ----------------------------------------------------- Icon card / tile --- */
.tp-icard { display: flex; gap: var(--sp-4); align-items: flex-start; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-2xl); padding: var(--sp-6); text-decoration: none; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
a.tp-icard:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-glow); border-color: var(--border-hover); }
.tp-icard-ico { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); display: grid; place-items: center; background: rgba(53,224,216,0.12); border: 1px solid rgba(53,224,216,0.25); color: var(--text-accent); }
.tp-icard-ico svg { width: 1.35rem; height: 1.35rem; }
.tp-icard--num { display: block; }
.tp-icard-num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-accent); letter-spacing: 0.1em; }
.tp-icard h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-lg); color: var(--text-heading); margin: 0.4rem 0 0; letter-spacing: var(--ls-tight); }
.tp-icard p { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-normal); margin: 0.4rem 0 0; }
.tp-icard-link { margin-top: 0.6rem; }

/* problem chip (small "→ text" tiles) */
.tp-problem { display: flex; gap: 0.6rem; align-items: flex-start; border: 1px solid var(--border-card); background: var(--bg-page-deep); border-radius: var(--radius-lg); padding: 0.85rem 1rem; font-size: var(--fs-sm); color: var(--slate-300); }
.tp-problem::before { content: "→"; color: var(--text-accent); flex: 0 0 auto; }

/* checklist row (what's included) — reuses tp-feature look */
.tp-check { display: flex; gap: var(--sp-3); align-items: flex-start; }
.tp-check-ico { flex: 0 0 auto; margin-top: 0.15rem; width: 1.4rem; height: 1.4rem; border-radius: 0.4rem; display: grid; place-items: center; background: rgba(53,224,216,0.12); border: 1px solid rgba(53,224,216,0.25); color: var(--text-accent); }
.tp-check-ico svg { width: 0.8rem; height: 0.8rem; }
.tp-check h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--text-heading); margin: 0; font-size: var(--fs-base); }
.tp-check p { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-normal); margin: 0.2rem 0 0; }

/* generic hero image treatment via glowframe already covered; sticky aside */
.tp-sticky { position: sticky; top: calc(var(--sp-16) + 1rem); }

/* ------------------------------------------------------------ Breadcrumb -- */
.tp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--text-muted); }
.tp-crumbs a { color: var(--text-muted); text-decoration: none; transition: color var(--dur) var(--ease-out); }
.tp-crumbs a:hover { color: var(--text-heading); }
.tp-crumbs .sep { color: var(--text-faint); }
.tp-crumbs .cur { color: var(--text-accent); }

/* -------------------------------------------------- Explainer visuals ----- */
/* Themed SVG diagrams / UI mocks (inline; inherit page fonts) */
.tp-diagram, .tp-uimock { display: block; width: 100%; height: auto; }
.tp-figure { position: relative; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.tp-figure::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(53,224,216,0.10), 0 30px 80px -40px rgba(53,224,216,0.20); }
.tp-figure svg, .tp-figure img { display: block; width: 100%; height: auto; border-radius: inherit; }

/* Stat / callout panels */
.tp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.tp-stat { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-xl); padding: var(--sp-6); position: relative; overflow: hidden; }
.tp-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--cyan-400), var(--blue-500)); opacity: 0.85; }
.tp-stat-num { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--text-accent); letter-spacing: var(--ls-tight); line-height: 1; }
.tp-stat-label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-heading); margin-top: 0.6rem; }
.tp-stat-sub { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-normal); margin-top: 0.35rem; }
@media (max-width: 760px) { .tp-stats { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------ Prose enrichments ------- */
.prose-dark > p:first-of-type { font-size: var(--fs-lg); color: var(--slate-200); line-height: 1.65; }
.prose-dark ol { list-style: none; counter-reset: li; padding: 0; margin: 0 0 var(--sp-4); }
.prose-dark ol li { counter-increment: li; position: relative; padding-left: var(--sp-8); margin-bottom: var(--sp-3); }
.prose-dark ol li::before { content: counter(li); position: absolute; left: 0; top: 0.05em; width: 1.4rem; height: 1.4rem; border-radius: 0.4rem; background: rgba(53,224,216,0.12); border: 1px solid rgba(53,224,216,0.3); color: var(--text-accent); font-family: var(--font-mono); font-size: 0.72rem; display: grid; place-items: center; }
.prose-dark blockquote { margin: var(--sp-8) 0; padding: 0.3rem 0 0.3rem var(--sp-6); border-left: 3px solid var(--cyan-400); }
.prose-dark blockquote p { margin: 0; font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-xl); line-height: 1.4; letter-spacing: var(--ls-tight); color: var(--text-heading); }
.prose-dark hr { border: 0; height: 1px; margin: var(--sp-10) 0; background: var(--hairline); }
.prose-dark code { font-family: var(--font-mono); font-size: 0.85em; background: var(--ink-850); border: 1px solid var(--border-card); border-radius: 0.35rem; padding: 0.1rem 0.4rem; color: var(--cyan-300); }
.prose-dark pre { background: var(--bg-page-deep); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: var(--sp-4); overflow-x: auto; margin: 0 0 var(--sp-4); }
.prose-dark pre code { background: none; border: 0; padding: 0; color: var(--slate-200); }
.prose-dark table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }
.prose-dark th, .prose-dark td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border-card); }
.prose-dark th { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-accent); }
.prose-dark img { border-radius: var(--radius-lg); border: 1px solid var(--border-card); margin: var(--sp-6) 0; }
.prose-dark figure { margin: var(--sp-6) 0; }
.prose-dark figcaption { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-2); text-align: center; }

/* callout box (raw-HTML <div class="tp-callout"> in markdown) */
.tp-callout { margin: var(--sp-8) 0; padding: var(--sp-5) var(--sp-6); border: 1px solid rgba(53,224,216,0.28); background: rgba(53,224,216,0.06); border-radius: var(--radius-xl); }
.tp-callout-label { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-accent); margin-bottom: var(--sp-3); }
.tp-callout-label::before { content: "\25B8"; }
.tp-callout ul { margin: 0; }
.tp-callout ul li { margin-bottom: var(--sp-2); }
.tp-callout p { margin: 0; color: var(--text-body); }

/* ---------------------------------------------------------------- Blog ---- */
.tp-post-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-800); border-bottom: 1px solid var(--border-card); }
.tp-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.tp-post:hover .tp-post-media img { transform: scale(1.04); }
.tp-post--featured.has-img .tp-post-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.tp-post--featured.has-img .tp-post-media { aspect-ratio: auto; min-height: 340px; border-bottom: 0; border-left: 1px solid var(--border-card); }
.tp-post--featured.has-img .tp-post-body { max-width: none; }
@media (max-width: 820px) { .tp-post--featured.has-img .tp-post-inner { grid-template-columns: 1fr; } .tp-post--featured.has-img .tp-post-media { aspect-ratio: 16/9; min-height: 0; border-left: 0; border-top: 1px solid var(--border-card); } }
.tp-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 900px) { .tp-posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .tp-posts { grid-template-columns: 1fr; } }
.tp-post { display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-2xl); overflow: hidden; text-decoration: none; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.tp-post:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-glow); border-color: var(--border-hover); }
.tp-post-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.tp-post-meta { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-accent); display: flex; gap: 0.55rem; align-items: center; flex-wrap: wrap; }
.tp-post-meta .dot { color: var(--text-faint); }
.tp-post-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-xl); color: var(--text-heading); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); margin: 0; }
.tp-post-excerpt { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-normal); margin: 0; flex: 1; }
.tp-post-foot { margin-top: var(--sp-2); }
/* featured (full-width) */
.tp-post--featured { grid-column: 1 / -1; margin-bottom: var(--sp-8); position: relative; overflow: hidden; }
.tp-post--featured::before { content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); -webkit-mask-image: radial-gradient(70% 90% at 90% 0%, #000, transparent 70%); mask-image: radial-gradient(70% 90% at 90% 0%, #000, transparent 70%); }
.tp-post--featured .tp-post-body { padding: clamp(2rem, 4vw, 3rem); max-width: 42rem; position: relative; }
.tp-post--featured .tp-post-title { font-size: var(--fs-2xl); }
.tp-post--featured .tp-post-excerpt { font-size: var(--fs-base); }
/* tags */
.tp-tagrow { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tp-tag { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--text-muted); border: 1px solid var(--border-card); background: var(--fill-soft); border-radius: var(--radius-pill); padding: 0.28rem 0.75rem; }

/* --------------------------------------------------------------- Home ---- */
.home-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-card); background: var(--glow-accent), var(--glow-blue), var(--bg-page); }
.home-hero-grid { position: absolute; inset: 0; opacity: 0.6; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); -webkit-mask-image: radial-gradient(80% 75% at 80% 15%, #000, transparent 72%); mask-image: radial-gradient(80% 75% at 80% 15%, #000, transparent 72%); }
.home-hero-inner { position: relative; padding: clamp(3.5rem,7vw,6rem) 0 clamp(3rem,6vw,5rem); }
.home-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.4rem; }

/* network hero */
.home-hero--net { position: relative; }
.home-hero-net-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.home-hero-net-bg canvas { display: block; width: 100%; height: 100%; }
.home-hero-net-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8,10,15,0.94) 0%, rgba(8,10,15,0.78) 38%, rgba(8,10,15,0.30) 66%, rgba(8,10,15,0.55) 100%), radial-gradient(120% 90% at 100% 0%, rgba(53,224,216,0.10), transparent 55%), linear-gradient(0deg, var(--bg-page) 0%, transparent 22%); }
.home-hero--net .home-hero-inner { position: relative; z-index: 1; min-height: min(72vh, 620px); display: flex; align-items: center; }
.home-hero-net-copy { max-width: 40rem; }

/* family band */
.home-band { text-align: center; max-width: 54rem; margin: 0 auto; }
.home-band p { font-family: var(--font-body); font-size: clamp(1.25rem,2.4vw,1.6rem); line-height: 1.45; color: var(--slate-200); margin: 1rem 0 0; font-weight: 500; }
.home-band .accent { color: var(--text-accent); }

/* telemetry ticker under minimal hero (reused as a signal strip) */
.home-telemetry { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 2rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.home-telemetry span::before { content: "● "; color: var(--text-accent); }

/* ---------------------------------------------------------------- Forms --- */
.tp-field { display: flex; flex-direction: column; }
.tp-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-heading); margin-bottom: 0.4rem; }
.tp-label .req { color: var(--text-accent); }
.tp-input, .tp-select, .tp-textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-heading);
  background: var(--ink-850); border: 1px solid var(--border-card); border-radius: var(--radius-lg);
  padding: 0.7rem 0.85rem; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.tp-textarea { resize: vertical; min-height: 5rem; }
.tp-input::placeholder, .tp-textarea::placeholder { color: var(--text-faint); }
.tp-input:focus, .tp-select:focus, .tp-textarea:focus { outline: none; border-color: var(--border-hover); box-shadow: 0 0 0 3px var(--accent-ring); }
.tp-select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23828da4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: 2.4rem; }
.tp-input--err, .tp-select--err, .tp-textarea--err { border-color: rgba(255,120,120,0.6); }
.tp-field-err { color: #ff9d9d; font-size: var(--fs-xs); margin-top: 0.4rem; }
.tp-form-alert { border: 1px solid rgba(255,120,120,0.4); background: rgba(255,80,80,0.10); color: #ffb4b4; border-radius: var(--radius-lg); padding: 0.75rem 1rem; font-size: var(--fs-sm); }
.tp-form-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr 1fr; }
.tp-form-grid .col-2 { grid-column: 1 / -1; }
.tp-form-grid fieldset.contents { display: contents; border: 0; margin: 0; padding: 0; }
@media (max-width: 640px) { .tp-form-grid { grid-template-columns: 1fr; } }
/* contact aside check row */
.tp-checkline { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-muted); }
.tp-checkline svg { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: 0.15rem; color: var(--text-accent); }
.tp-phone-cta { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--border-card); background: var(--fill-soft); border-radius: var(--radius-lg); padding: 0.85rem 1rem; font-weight: var(--fw-semibold); color: var(--text-heading); text-decoration: none; font-family: var(--font-mono); transition: border-color var(--dur) var(--ease-out); }
.tp-phone-cta:hover { border-color: var(--border-hover); }
.tp-phone-cta svg { width: 1.1rem; height: 1.1rem; color: var(--text-accent); flex: 0 0 auto; }
/* success check badge */
.tp-success-badge { margin: 0 auto; width: 4rem; height: 4rem; border-radius: var(--radius-2xl); display: grid; place-items: center; background: rgba(53,224,216,0.12); border: 1px solid rgba(53,224,216,0.3); color: var(--text-accent); box-shadow: var(--shadow-glow); }
.tp-success-badge svg { width: 2rem; height: 2rem; }
/* 404 big code */
.tp-bigcode { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(4rem, 12vw, 7rem); line-height: 1; background: var(--grad-mark); -webkit-background-clip: text; background-clip: text; color: transparent; }