/* ============================================================
   IT Folder homepage. Dark by default; [data-bs-theme="light"] tokens below.
   Layout and motion follow the Vox Issue marketing page (aurora
   hero, fine grid, film grain, hairline cards, scroll reveals),
   recoloured with the IT Folder app's .dark tokens and the logo
   teal instead of Vox Issue's violet.

     #0d1117  app dark body            (--bs-body-bg)
     #1e2736  app dark tertiary        (--bs-tertiary-bg)
     #1e2022  app dark sidebar/topbar  (--itf-chrome)
     #8391a2  app dark secondary text  (--bs-secondary-color)
     #0759b6  app primary              (--itf-blue, buttons)
     #19b3d7  logo teal                (--itf-teal, accents)
   ============================================================ */
:root,
[data-bs-theme="dark"] {
    color-scheme: dark;
    --itf-teal: #19b3d7;
    --itf-teal-rgb: 25, 179, 215;
    --itf-blue: #0759b6;
    --itf-blue-rgb: 7, 89, 182;
    /* Lighter blue for gradient text: #0759b6 itself is under 3:1 on #0d1117 */
    --itf-blue-lite: #4a8fe7;
    --itf-pink: #ec4b9b;
    --itf-chrome: #1e2022;

    --bs-body-bg: #0d1117;
    --bs-body-bg-rgb: 13, 17, 23;
    --bs-body-color: #e6edf3;
    --bs-body-color-rgb: 230, 237, 243;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #8391a2;
    --bs-secondary-color-rgb: 131, 145, 162;
    --bs-tertiary-bg: #1e2736;
    --bs-tertiary-bg-rgb: 30, 39, 54;
    --bs-secondary-bg: #161d28;
    --bs-border-color: #2b3440;
    --bs-primary: #19b3d7;
    --bs-primary-rgb: 25, 179, 215;
    --bs-link-color: #4fc6e3;
    --bs-link-color-rgb: 79, 198, 227;
    --bs-link-hover-color: #8adbee;
    --bs-link-hover-color-rgb: 138, 219, 238;
    --bs-heading-color: #ffffff;
    --bs-code-color: #8adbee;

    --itf-grad-1: var(--itf-teal);
    --itf-grad-2: var(--itf-blue-lite);
    --itf-grid: rgba(25, 179, 215, 0.08);
    --itf-card-glow: rgba(25, 179, 215, 0.20);
    --itf-surface: rgba(25, 179, 215, 0.035);
    --itf-card-bg: #111720;
    --itf-accent-text: var(--itf-teal);   /* teal for text and small icons */
    --itf-band: linear-gradient(180deg, rgba(30, 39, 54, .55), rgba(30, 39, 54, .35));
    --itf-inset: #1b1f24;                 /* editor-like wells (mention example) */
    --itf-hover-shadow: 0 24px 50px -22px rgba(0,0,0,.6);
    --itf-nav-bg: rgba(13, 17, 23, 0.9);

    --itf-font: system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    --itf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Light mode (theme toggle). Same layout; the app's light surfaces, and the
   teal/blue darkened wherever it is text: #19b3d7 is only 2.5:1 on white,
   #0e7490 is 5.4:1. The app screenshots and video stay dark, framed. */
[data-bs-theme="light"] {
    color-scheme: light;
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: #1f2937;
    --bs-body-color-rgb: 31, 41, 55;
    --bs-emphasis-color: #0d1117;
    --bs-secondary-color: #5b6b7c;
    --bs-secondary-color-rgb: 91, 107, 124;
    --bs-tertiary-bg: #f3f6f9;
    --bs-tertiary-bg-rgb: 243, 246, 249;
    --bs-secondary-bg: #eef2f6;
    --bs-border-color: #dfe5ec;
    --bs-primary: #0e7490;
    --bs-primary-rgb: 14, 116, 144;
    --bs-link-color: #0e7490;
    --bs-link-color-rgb: 14, 116, 144;
    --bs-link-hover-color: #0759b6;
    --bs-link-hover-color-rgb: 7, 89, 182;
    --bs-heading-color: #0d1117;
    --bs-code-color: #0e7490;

    --itf-grad-1: #0e7d97;
    --itf-grad-2: #0759b6;
    --itf-grid: rgba(14, 125, 151, 0.07);
    --itf-card-glow: rgba(14, 125, 151, 0.14);
    --itf-surface: rgba(14, 125, 151, 0.03);
    --itf-card-bg: #ffffff;
    --itf-accent-text: #0e7490;
    --itf-band: linear-gradient(180deg, #f5f8fb, #f1f5f9);
    --itf-inset: #f3f6f9;
    --itf-hover-shadow: 0 22px 44px -24px rgba(15, 23, 42, .28);
    --itf-nav-bg: rgba(255, 255, 255, 0.9);
}

html { scroll-padding-top: 80px; }
body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--itf-font);
    font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    letter-spacing: -0.006em;
}
h1, h2, h3, .h5 { letter-spacing: -0.03em; text-wrap: balance; color: var(--bs-heading-color); }
code { color: var(--bs-code-color); }
.skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 2000;
    background: var(--itf-blue); color: #fff; padding: 10px 16px; border-radius: 10px;
    text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--itf-teal); outline-offset: 3px; }

.grad-text {
    background: linear-gradient(100deg, var(--itf-grad-1) 0%, var(--itf-grad-2) 55%, var(--itf-grad-1) 110%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: grad-drift 9s ease-in-out infinite;
}
@keyframes grad-drift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Decorative glows (.app-frame::before, hero/CTA auroras) extend past their
   boxes; clip them at the page edge so phones never scroll sideways. clip,
   not hidden, so the sticky nav keeps working. */
main { overflow-x: clip; }

/* ── Navbar ─────────────────────────────────────────────── */
.navbar-itf {
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    background: var(--itf-nav-bg);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-toggler-border-color: var(--bs-border-color);
}
.navbar-itf::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--bs-border-color) 20%, var(--bs-border-color) 80%, transparent);
}
.navbar-itf .navbar-brand img { height: 36px; width: auto; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.navbar-itf .navbar-brand:hover img { transform: scale(1.04); }
.navbar-itf .nav-link {
    position: relative; font-weight: 500; font-size: 15px;
    color: var(--bs-secondary-color); transition: color .2s ease;
}
.navbar-itf .nav-link::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1.5px;
    background: linear-gradient(90deg, var(--itf-grad-1), var(--itf-grad-2));
    transform: scaleX(0); transform-origin: left; border-radius: 2px;
    transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.navbar-itf .nav-link:hover, .navbar-itf .nav-link:focus-visible { color: var(--bs-body-color); }
.navbar-itf .nav-link:hover::after { transform: scaleX(1); }
.navbar-itf .nav-link.is-report { color: var(--bs-link-color); }
@media (min-width: 992px) { .navbar-itf .navbar-nav .nav-link { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 991.98px) {
    .navbar-itf .navbar-collapse { padding: 12px 0 16px; }
    .navbar-itf .nav-link::after { display: none; }
}

/* ── Buttons ────────────────────────────────────────────── */
/* White on #0759b6 is 6.6:1; the end stop (#0a6bc4) keeps it above 5:1. */
.btn-primary {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    background: linear-gradient(120deg, var(--itf-blue), #0a6bc4);
    border: none; font-weight: 600; letter-spacing: -0.01em;
    box-shadow: 0 6px 18px -6px rgba(var(--itf-teal-rgb), .45);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover, .btn-primary:focus-visible {
    transform: translateY(-2px); filter: brightness(1.1);
    box-shadow: 0 12px 28px -8px rgba(var(--itf-teal-rgb), .6);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
    --bs-btn-color: var(--bs-body-color); --bs-btn-hover-color: #fff;
    --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-border-color: var(--itf-teal);
    --bs-btn-hover-bg: rgba(var(--itf-teal-rgb), .08); --bs-btn-active-bg: rgba(var(--itf-teal-rgb), .14);
    --bs-btn-active-border-color: var(--itf-teal); --bs-btn-active-color: #fff;
    font-weight: 600; background: rgba(255,255,255,.02);
    transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, background .25s ease;
}
.btn-ghost:hover { transform: translateY(-2px); }

/* ── Hero ───────────────────────────────────────────────── */
.hero-itf { position: relative; padding: 88px 0 104px; overflow: hidden; }
/* Aurora glow */
.hero-itf::before {
    content: '';
    position: absolute; inset: -20% -10% -30%;
    background:
        radial-gradient(40% 50% at 18% 28%, rgba(25, 179, 215, 0.20), transparent 70%),
        radial-gradient(45% 55% at 88% 66%, rgba(7, 89, 182, 0.30), transparent 70%),
        radial-gradient(30% 40% at 60% 10%, rgba(25, 179, 215, 0.10), transparent 70%);
    z-index: 0; pointer-events: none;
    animation: aurora 18s ease-in-out infinite alternate;
}
/* Fine grid, fading toward the fold */
.hero-itf::after {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, var(--itf-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--itf-grid) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
}
@keyframes aurora {
    0% { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}
.hero-itf > .container { position: relative; z-index: 1; }
.hero-itf { padding: 120px 0 128px; }
.hero-itf h1 { font-size: clamp(40px, 6.4vw, 80px); font-weight: 800; line-height: 1.04; }
.lede { font-size: 19.5px; color: var(--bs-secondary-color); max-width: 640px; }
/* Hero bullets: the same round check list as the feature sections, as a
   left-aligned block centred under the headline */
.itf-list.hero-list { display: inline-block; text-align: left; margin: 0 0 36px; font-size: 16.5px; }
.itf-list.hero-list li:last-child { margin-bottom: 0; }
.hero-fineprint { font-size: 14px; color: var(--bs-secondary-color); margin: 16px 0 0; }

.section-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--itf-accent-text); margin-bottom: 14px;
}
.section-eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(120deg, var(--itf-grad-1), var(--itf-grad-2));
    box-shadow: 0 0 0 3px rgba(var(--itf-teal-rgb), .18);
}
.section-eyebrow.justify-content-center { justify-content: center; }
section { padding: 96px 0; position: relative; }
section h2 { font-size: clamp(29px, 3.8vw, 44px); font-weight: 800; line-height: 1.08; }
.section-sub { font-size: 17.5px; color: var(--bs-secondary-color); max-width: 640px; }
@media (max-width: 575.98px) { section { padding: 72px 0; } .hero-itf { padding: 56px 0 72px; } }

/* Tinted bands: app tertiary with a teal wash and hairline dividers */
.band {
    background:
        linear-gradient(var(--itf-surface), var(--itf-surface)),
        var(--itf-band);
}
.band::before,
.band::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bs-border-color) 25%, var(--bs-border-color) 75%, transparent);
}
.band::before { top: 0; }
.band::after { bottom: 0; }

/* ── App window frame (screenshots + video) ─────────────── */
.app-frame {
    position: relative;
    border-radius: 16px; border: 1px solid var(--bs-border-color);
    background: linear-gradient(160deg, #161b22, #07090d);
    padding: 0 8px 8px;
    box-shadow:
        0 2px 0 rgba(255,255,255,.05) inset,
        0 34px 70px -18px rgba(0,0,0,.6),
        0 0 90px -30px var(--itf-card-glow);
    transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.app-frame::before {
    content: ''; position: absolute; inset: -12% -14%; z-index: -1;
    background: radial-gradient(closest-side, var(--itf-card-glow), transparent 78%);
    opacity: .9; filter: blur(6px); pointer-events: none;
}
.app-frame:hover {
    transform: translateY(-6px);
    box-shadow:
        0 2px 0 rgba(255,255,255,.07) inset,
        0 44px 90px -20px rgba(0,0,0,.65),
        0 0 120px -28px var(--itf-card-glow);
}
.app-frame-bar {
    display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 6px;
}
.app-frame-bar .light { width: 10px; height: 10px; border-radius: 50%; background: #3a424d; }
.app-frame-bar .light.r { background: #ff5f57; }
.app-frame-bar .light.y { background: #febc2e; }
.app-frame-bar .light.g { background: #28c840; }
.app-frame-bar .url {
    margin-left: 10px; flex: 1; max-width: 320px; height: 20px; border-radius: 6px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06);
    font-size: 11.5px; line-height: 18px; color: var(--bs-secondary-color);
    padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-family: var(--itf-font-mono);
}
/* height:auto matters: the width/height attributes reserve space, this keeps the ratio */
.app-frame img, .app-frame video { display: block; width: 100%; height: auto; border-radius: 9px; background: #0d1117; }
.frame-caption { text-align: center; font-size: 14px; color: var(--bs-secondary-color); margin-top: 16px; }

.shot-zoom {
    display: block; width: 100%; padding: 0; border: 0; background: none; position: relative; cursor: zoom-in;
    border-radius: 9px;
}
.shot-zoom .zoom-hint {
    position: absolute; right: 12px; bottom: 12px;
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(13,17,23,.78); border: 1px solid var(--bs-border-color); color: #fff;
    opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease;
}
.shot-zoom:hover .zoom-hint, .shot-zoom:focus-visible .zoom-hint { opacity: 1; transform: none; }

/* Bare video (no window chrome) for the @Mentions loop */
.loop-wrap.is-bare video { display: block; width: 100%; height: auto; border-radius: 12px; background: #0d1117; }

/* Video loop + its pause control (WCAG 2.2.2: moving content > 5s needs a pause) */
.loop-wrap { position: relative; }
.loop-toggle {
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(13,17,23,.8); border: 1px solid var(--bs-border-color); color: #fff;
    transition: border-color .2s ease, transform .2s ease;
}
.loop-toggle:hover { border-color: var(--itf-teal); transform: scale(1.05); }
.loop-toggle .bi-play-fill { display: none; }
.loop-toggle[aria-pressed="true"] .bi-pause-fill { display: none; }
.loop-toggle[aria-pressed="true"] .bi-play-fill { display: inline; }

/* Floating second shot that overlaps the main frame (procedure run) */
.stack-shot { position: relative; }
.stack-shot .app-frame.is-float {
    position: absolute; right: -4%; bottom: -14%; width: 46%;
    transform: rotate(1.2deg);
}
.stack-shot .app-frame.is-float:hover { transform: rotate(0deg) translateY(-6px); }
@media (max-width: 767.98px) {
    .stack-shot .app-frame.is-float { position: relative; right: auto; bottom: auto; width: 82%; margin: -28px 0 0 auto; }
}
.stack-shot.has-float { margin-bottom: 12%; }
@media (max-width: 767.98px) { .stack-shot.has-float { margin-bottom: 0; } }

/* 60/40 split (video | copy) for the @Mentions section */
.mentions-figure { padding-top: 20px; }
.col-lg-split-60, .col-lg-split-40 { flex: 0 0 auto; width: 100%; }
@media (min-width: 992px) {
    .col-lg-split-60 { width: 60%; }
    .col-lg-split-40 { width: 40%; }
    /* Video drawn at 70% of its column, centered in the 60% side */
    .mentions-figure { width: 70%; margin-left: auto; margin-right: auto; }
}

/* ── Cards ──────────────────────────────────────────────── */
.itf-card {
    position: relative; overflow: hidden;
    border: 1px solid var(--bs-border-color); border-radius: 20px;
    background: var(--itf-card-bg); padding: 30px; height: 100%;
    transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
}
.itf-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--itf-grad-1), var(--itf-grad-2));
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.itf-card::after {
    content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
    background: radial-gradient(60% 60% at 20% 0%, var(--itf-card-glow), transparent 70%);
    transition: opacity .45s ease;
}
.itf-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--itf-teal-rgb), .45);
    box-shadow: var(--itf-hover-shadow);
}
.itf-card:hover::before { transform: scaleX(1); }
.itf-card:hover::after { opacity: 1; }
.itf-card > * { position: relative; }
.icon-chip {
    width: 50px; height: 50px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--itf-teal), var(--itf-blue));
    color: #fff; font-size: 22px; margin-bottom: 18px;
    box-shadow: 0 10px 22px -8px rgba(var(--itf-teal-rgb), .55);
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.itf-card:hover .icon-chip { transform: translateY(-2px) scale(1.06) rotate(-4deg); }
.itf-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.itf-card p { color: var(--bs-secondary-color); margin-bottom: 0; }
.step-num {
    font-family: var(--itf-font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
    color: var(--itf-accent-text); display: block; margin-bottom: 6px;
}

.itf-list { list-style: none; padding: 0; margin: 0; }
.itf-list li { display: flex; gap: 10px; margin-bottom: 12px; color: var(--bs-secondary-color); }
.itf-list li i { color: var(--itf-accent-text); flex: 0 0 auto; margin-top: 1px; }
.itf-list b { color: var(--bs-body-color); font-weight: 600; }

/* Tool cards: screenshot on top, cropped to one height so the grid lines up */
.itf-card.tool-card { padding: 0; display: flex; flex-direction: column; }
.tool-shot {
    aspect-ratio: 4 / 3; overflow: hidden; border-radius: 19px 19px 0 0;
    background: #0d1117; border-bottom: 1px solid var(--bs-border-color);
}
.tool-shot img {
    width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block;
    transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.tool-shot img.is-bottom { object-position: center 80%; } /* network diagram: the drawing sits below its toolbar */
.tool-card:hover .tool-shot img { transform: scale(1.03); }
.tool-body { padding: 22px 24px 26px; }
.tool-body h3 { font-size: 18px; }
.tool-icon { color: var(--itf-accent-text); }

/* ── @mention pills ─────────────────────────────────────── */
.field-pill {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--bs-border-color); border-radius: 999px;
    padding: 7px 14px; font-size: 13.5px; font-weight: 600;
    background: var(--itf-card-bg); color: var(--bs-body-color);
    transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, background .25s ease;
}
.field-pill:hover { transform: translateY(-2px); border-color: rgba(var(--itf-teal-rgb), .5); background: var(--bs-tertiary-bg); }
.field-pill i { color: var(--itf-accent-text); }
.field-pill .at { font-family: var(--itf-font-mono); color: var(--itf-accent-text); font-weight: 500; }

/* ── Relationship icons + badges (from itfolder-www) ───────
   Icons copied from itfolder-www/src/composables/relationship-icons.css
   (generated from the itfolder SVG masters); badge colours from
   relationship-theme.js, so the pills match the app's relationship
   badges and @mention chips. Only the types shown on this page. */
.bi[class*="bi-itf-"]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask: var(--itfolder-icon) center / contain no-repeat;
  mask: var(--itfolder-icon) center / contain no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.bi-itf-user { --itfolder-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20role%3D%22img%22%3E%3Ctitle%3EUser%3C%2Ftitle%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M%205%2021%20L%205%2018%20C%205%2012%2019%2012%2019%2018%20L%2019%2021%20Z%22%2F%3E%3C%2Fsvg%3E"); }
.bi-itf-employee { --itfolder-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20role%3D%22img%22%3E%3Ctitle%3EEmployee%3C%2Ftitle%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2218%22%20rx%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%209%202%20L%2015%202%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M%208%2018%20C%208%2013%2016%2013%2016%2018%22%2F%3E%3C%2Fsvg%3E"); }
.bi-itf-device { --itfolder-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20role%3D%22img%22%3E%3Ctitle%3EDevice%3C%2Ftitle%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2012%2016%20L%2012%2021%20M%207%2021%20L%2017%2021%22%2F%3E%3C%2Fsvg%3E"); }
.bi-itf-network { --itfolder-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20role%3D%22img%22%3E%3Ctitle%3ENetwork%3C%2Ftitle%3E%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%228%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2012%209%20L%2012%2014%20M%204%2017%20L%204%2014%20L%2020%2014%20L%2020%2017%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2217%22%20width%3D%225%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2217%22%20width%3D%225%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2217%22%20width%3D%224%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.bi-itf-app { --itfolder-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20role%3D%22img%22%3E%3Ctitle%3EApp%3C%2Ftitle%3E%3Cpath%20d%3D%22M%206%2018%20C%200%2018%201%2010%206%2010%20C%205%202%2017%202%2018%2010%20C%2024%2010%2023%2018%2018%2018%20Z%22%2F%3E%3C%2Fsvg%3E"); }
.bi-itf-software { --itfolder-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20role%3D%22img%22%3E%3Ctitle%3ESoftware%3C%2Ftitle%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%2220%22%20height%3D%2218%22%20rx%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%202%208%20L%2022%208%20M%209%2012%20L%206%2015%20L%209%2018%20M%2015%2012%20L%2018%2015%20L%2015%2018%22%2F%3E%3C%2Fsvg%3E"); }
.bi-itf-bookmark { --itfolder-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20role%3D%22img%22%3E%3Ctitle%3EBookmark%3C%2Ftitle%3E%3Cpath%20d%3D%22M%206%203%20L%2018%203%20L%2018%2022%20L%2012%2018%20L%206%2022%20Z%22%2F%3E%3C%2Fsvg%3E"); }
.bi-itf-budget { --itfolder-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20role%3D%22img%22%3E%3Ctitle%3EBudget%3C%2Ftitle%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M%205%209%20L%205%2015%20M%2019%209%20L%2019%2015%22%2F%3E%3C%2Fsvg%3E"); }
.rel-badge {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--rel-border); border-radius: 6px;
    background: var(--rel-color); color: #fff;
    padding: 4px 11px; font-size: 13.5px; font-weight: 600; line-height: 1.4;
    transition: transform .25s cubic-bezier(.22,1,.36,1), filter .25s ease;
}
.rel-badge:hover { transform: translateY(-2px); filter: brightness(1.12); }
.rel-badge .bi { font-size: 15px; }
.rel-assets     { --rel-color: #A65320; --rel-border: #c58f6e; }
.rel-finance    { --rel-color: #39754F; --rel-border: #7ea58d; }
.rel-people     { --rel-color: #21766F; --rel-border: #6fa6a1; }
.rel-web-assets { --rel-color: #4C5B94; --rel-border: #8b94b9; }

/* A mention chip drawn the way the editor draws it */
.mention-demo {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    border: 1px solid var(--bs-border-color); border-radius: 14px;
    background: var(--itf-inset); padding: 14px 18px; font-size: 15px; color: var(--bs-body-color);
}
.mention-typed { font-family: var(--itf-font-mono); color: var(--bs-secondary-color); }
.mention-arrow { color: var(--bs-secondary-color); }

/* ── Integrations ───────────────────────────────────────── */
.integration-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    height: 100%; padding: 18px 10px; border-radius: 16px;
    border: 1px solid var(--bs-border-color); background: var(--itf-card-bg);
    transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, background .25s ease;
}
.integration-card:hover { transform: translateY(-3px); border-color: rgba(var(--itf-teal-rgb), .5); background: var(--bs-tertiary-bg); }
/* Icons sit on a light tile so dark brand marks (GitHub, Apple, Zoom) stay visible */
.integration-card .connector-tile {
    width: 44px; height: 44px; border-radius: 12px; background: #f3f6f9;
    display: inline-flex; align-items: center; justify-content: center;
}
.integration-card img { width: 28px; height: 28px; object-fit: contain; }
.integration-card span.connector-name { font-size: 13px; font-weight: 600; color: var(--bs-secondary-color); text-align: center; }

/* ── Trust + pricing panel ──────────────────────────────── */
.trust-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.price-panel {
    position: relative; overflow: hidden; text-align: center;
    border: 1px solid var(--bs-border-color); border-radius: 24px;
    background:
        radial-gradient(60% 70% at 50% 0%, rgba(var(--itf-teal-rgb), .14), transparent 70%),
        var(--itf-card-bg);
    padding: 44px clamp(24px, 4vw, 52px);
    transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
}
.price-panel::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--itf-grad-1), var(--itf-grad-2));
}
.price-panel:hover { transform: translateY(-6px); border-color: rgba(var(--itf-teal-rgb), .45); box-shadow: 0 24px 50px -22px rgba(0,0,0,.6); }
.price-panel > * { position: relative; }
.price-label {
    display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: 10px;
}
.price-value { font-size: clamp(56px, 8vw, 80px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.price-per { font-size: 20px; color: var(--bs-secondary-color); font-weight: 600; }
.price-extra { color: var(--bs-secondary-color); margin: 12px 0 26px; }
.price-includes {
    display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
    list-style: none; padding: 22px 0 0; margin: 26px 0 0; border-top: 1px solid var(--bs-border-color);
    font-size: 14.5px; color: var(--bs-secondary-color);
}
.price-includes i { color: var(--itf-accent-text); margin-right: 6px; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq-itf .accordion {
    --bs-accordion-bg: var(--itf-card-bg);
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-border-radius: 16px;
    --bs-accordion-inner-border-radius: 15px;
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--itf-card-bg);
    --bs-accordion-active-bg: rgba(var(--itf-teal-rgb), .08);
    --bs-accordion-active-color: #fff;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--itf-teal-rgb), .35);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238391a2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2319b3d7' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.faq-itf .accordion-item { border: 1px solid var(--bs-border-color); border-radius: 16px; overflow: hidden; margin-bottom: 12px; transition: border-color .25s ease; }
.faq-itf .accordion-item:hover { border-color: rgba(var(--itf-teal-rgb), .4); }
.faq-itf .accordion-button { font-weight: 600; font-size: 16.5px; padding: 18px 22px; }
.faq-itf .accordion-body { color: var(--bs-secondary-color); padding: 0 22px 20px; }

/* ── Demo ───────────────────────────────────────────────── */
.demo-frame {
    position: relative; border-radius: 24px; overflow: hidden;
    border: 1px solid var(--bs-border-color); aspect-ratio: 16 / 9;
    background: #000;
    box-shadow: 0 34px 70px -18px rgba(0,0,0,.6), 0 0 90px -30px var(--itf-card-glow);
}
.demo-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ── CTA ────────────────────────────────────────────────── */
.cta-itf { overflow: hidden; }
.cta-itf::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(40% 70% at 20% 50%, rgba(25, 179, 215, .16), transparent 70%),
        radial-gradient(40% 70% at 80% 50%, rgba(7, 89, 182, .26), transparent 70%);
}
.cta-itf::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, var(--itf-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--itf-grid) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(60% 80% at 50% 50%, #000 20%, transparent 75%);
    mask-image: radial-gradient(60% 80% at 50% 50%, #000 20%, transparent 75%);
}
.cta-itf > .container { position: relative; z-index: 1; }

/* ── Footer ─────────────────────────────────────────────── */
.footer-itf {
    position: relative; padding: 64px 0 36px;
    background: linear-gradient(var(--itf-surface), transparent 40%);
}
.footer-itf::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--bs-border-color) 20%, rgba(var(--itf-teal-rgb), .4) 50%, var(--bs-border-color) 80%, transparent);
}
.footer-itf h2 {
    font-size: 12px; font-weight: 700; margin-bottom: 14px;
    text-transform: uppercase; letter-spacing: .1em; color: var(--bs-secondary-color);
}
.footer-itf ul { list-style: none; padding: 0; margin: 0; }
.footer-itf li { margin-bottom: 9px; }
.footer-itf a, .footer-itf .btn-link {
    text-decoration: none; color: var(--bs-secondary-color);
    transition: color .2s ease, padding-left .25s cubic-bezier(.22,1,.36,1);
}
.footer-itf ul a:hover { color: var(--itf-accent-text); padding-left: 5px; }
.footer-itf .footer-blurb { color: var(--bs-secondary-color); font-size: 14.5px; max-width: 360px; }
.footer-itf .footer-blurb a { color: var(--bs-link-color); }
.footer-bottom { border-top: 1px solid var(--bs-border-color); margin-top: 44px; padding-top: 22px; font-size: 13.5px; color: var(--bs-secondary-color); }
.footer-bottom a:hover, .footer-bottom .btn-link:hover { color: var(--itf-accent-text); }
.footer-bottom .btn-link { font-size: 13.5px; vertical-align: baseline; }

/* ── Image modal ────────────────────────────────────────── */
.image-modal {
    position: fixed; inset: 0; z-index: 3000; display: none;
    align-items: center; justify-content: center; padding: 24px;
    background: rgba(5, 8, 12, .92); backdrop-filter: blur(6px);
}
.image-modal.active { display: flex; }
.image-modal img { max-width: 100%; max-height: 100%; border-radius: 12px; border: 1px solid var(--bs-border-color); }
.image-modal .close-modal {
    position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid var(--bs-border-color); background: #161b22; color: #fff; font-size: 26px; line-height: 1;
}

/* ── Craft layer: grain + reveals ───────────────────────── */
/* Grain sits below the sticky nav (z 1020) so it never breaks the nav's backdrop-filter. */
body::before {
    content: ''; position: fixed; inset: 0; z-index: 1000; pointer-events: none;
    opacity: .03; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Reveals only hide content once JS has confirmed it can show it again */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.js .stagger > * { opacity: 0; transform: translateY(18px); }
.js .stagger.is-in > * {
    opacity: 1; transform: none;
    transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.stagger.is-in > *:nth-child(1) { transition-delay: .05s; }
.stagger.is-in > *:nth-child(2) { transition-delay: .12s; }
.stagger.is-in > *:nth-child(3) { transition-delay: .19s; }
.stagger.is-in > *:nth-child(4) { transition-delay: .26s; }
.stagger.is-in > *:nth-child(5) { transition-delay: .33s; }
.stagger.is-in > *:nth-child(6) { transition-delay: .40s; }
.stagger.is-in > *:nth-child(7) { transition-delay: .47s; }
.stagger.is-in > *:nth-child(8) { transition-delay: .54s; }
.stagger.is-in > *:nth-child(n+9) { transition-delay: .6s; }

/* Hero load-in on first paint */
.hero-copy > * { opacity: 0; animation: hero-in .9s cubic-bezier(.22,1,.36,1) forwards; }
.hero-copy > *:nth-child(1) { animation-delay: .05s; }
.hero-copy > *:nth-child(2) { animation-delay: .14s; }
.hero-copy > *:nth-child(3) { animation-delay: .23s; }
.hero-copy > *:nth-child(4) { animation-delay: .32s; }
.hero-copy > *:nth-child(5) { animation-delay: .40s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .grad-text, .hero-itf::before { animation: none; }
    .js .reveal, .js .stagger > *, .hero-copy > * {
        opacity: 1 !important; transform: none !important; animation: none !important;
    }
    .app-frame:hover, .itf-card:hover, .price-panel:hover, .btn-primary:hover { transform: none; }
}

/* ── Light mode details ─────────────────────────────────── */
[data-bs-theme="light"] .navbar-itf {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2831, 41, 55, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-bs-theme="light"] .itf-card,
[data-bs-theme="light"] .price-panel,
[data-bs-theme="light"] .integration-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
[data-bs-theme="light"] .price-panel:hover { box-shadow: var(--itf-hover-shadow); }
[data-bs-theme="light"] .integration-card .connector-tile { border: 1px solid var(--bs-border-color); }
[data-bs-theme="light"] .btn-ghost { --bs-btn-hover-color: #0d1117; --bs-btn-active-color: #0d1117; background: #ffffff; }
[data-bs-theme="light"] .faq-itf .accordion { --bs-accordion-active-color: #0d1117; }
[data-bs-theme="light"] .hero-itf::before { opacity: .7; }
[data-bs-theme="light"] body::before { opacity: .015; }