/* ==========================================================================
   IT Niche — 2026 redesign
   Palette: Orange #E57119 (verified from production CSS) · Black #000000 · White (+ neutral gray tints)
   Type: Lato
   Contents
     1. Tokens        6. Header + mega menu   11. AI section
     2. Base          7. Hero                 12. Products / experience
     3. Utilities     8. Promo / intro        13. Testimonials / blog / follow
     4. Buttons/links 9. Customized services  14. Footer / dialog
     5. Forms         10. Group promotions    15. Illustration system + motion
                                             16. Process (strategy → research → result)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --black: #000000;
  --black-900: #0B0B0D;
  --black-800: #1A1A1A;
  --black-700: #262626;
  --black-400: #6B6B6B;
  --black-300: #A3A3A3;
  --black-200: #D6D6D6;
  --black-100: #ECECEC;
  --black-50: #F7F7F7;

  --orange: #E57119;
  --orange-ink: #e57219;     /* orange text on light backgrounds (AA) */
  --orange-300: #F5A46A;     /* orange text on dark backgrounds */
  --orange-100: #FDEBDD;
  --orange-50: #FFF6EE;

  --ink: #111111;
  --on-orange: #ffffff;      /* text on orange buttons — matches itniche.com's white-on-orange CTAs */
  --muted: #5A5A5A;
  --line: #E7E7E7;
  --line-strong: #D0D0D0;

  --font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --hh: 75px;                /* header height */

  --r-lg: 24px; --r-xl: 32px;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px -14px rgba(0, 0, 0, .22);
  --sh-2: 0 2px 4px rgba(0, 0, 0, .05), 0 22px 44px -22px rgba(0, 0, 0, .38);
  --sh-3: 0 30px 60px -28px rgba(0, 0, 0, .45);

  --ease: cubic-bezier(.22, .7, .2, 1);
  --t-fast: .2s;
  --t-med: .35s;

  /* z-index scale */
  --z-header: 1000;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.65;
  color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.nav-open, html.nav-open body, html.dialog-open, html.dialog-open body { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
:where(svg:not([viewBox])) { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

h1, h2, h3 { font-weight: 900; letter-spacing: -.02em; color: var(--black); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 4.6vw + 1rem, 2.6rem); line-height: 1.03; letter-spacing: -.035em; }
h2 { font-size: clamp(1.50rem, 2.8vw + .9rem, 1.50rem); line-height: 1.08; }
h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
p { text-wrap: pretty; }
strong { font-weight: 700; }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--orange); color: var(--on-orange); }

/* ---------- 3. Utilities ---------- */
/* Gutters come from the width, not padding. Both are !important because many page stylesheets still
   redefine .container (width:100% + their own padding); the forced padding:0 then left content touching
   the screen edge on phones. Page-level max-width still caps the content width on large screens. */
.container { width: min(100% - 2 * var(--gutter), var(--container)) !important; margin-inline: auto; padding: 0 !important; }
/* Bootstrap-style rows (-15px side margins) assume a padded container; never let them bleed past the gutter */
.container > .row { margin-inline: max(-15px, -1 * var(--gutter)); }
/* reCAPTCHA renders a fixed 304×78px iframe. On narrow screens scale it down and give its box the
   scaled size, so the layout (not just the pixels) fits — shared by every form on the site. */
@media (max-width: 420px) {
  .g-recaptcha { transform: scale(.86) !important; transform-origin: 0 0 !important; width: 262px !important; height: 68px !important; min-height: 0 !important; }
}
@media (max-width: 350px) {
  .g-recaptcha { transform: scale(.76) !important; width: 232px !important; height: 60px !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 2000; background: var(--black); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 16px; }
.flip { transform: scaleX(-1); }

.section { position: relative; padding-block: clamp(72px, 10vw, 80px); overflow-x: clip; }
.section--tight { padding-block: clamp(32px, 5vw, 72px); }
.section--tint { background: var(--black-50); }
.section--dark { background: var(--black-900); color: #fff; overflow: hidden; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .card-form h3 { color: var(--black); }
.section--dark .lead { color: rgba(255, 255, 255, .78); }

.section-head { margin-bottom: 36px; max-width: 760px; }
.section-head--split { max-width: none; display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px 64px; align-items: end; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: 18px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-100); }
.eyebrow--light { color: var(--orange-300); }
.eyebrow--light .dot { box-shadow: 0 0 0 4px rgba(229, 113, 25, .22); }
.lead { font-size: clamp(1.0625rem, .5vw + 1rem, 1.10rem); line-height: 1.6; color: var(--muted); max-width: 60ch; }
.grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.chips li { font-size: .8125rem; font-weight: 700; line-height: 1; padding: 7px 11px; border-radius: 999px; background: var(--black-50); color: var(--black); border: 1px solid var(--line); }

.pills { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 15px; }
.pills li, .tick-row li { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 700; color: var(--black); }
.pills svg, .tick-row svg { width: 18px; height: 18px; color: var(--orange-ink); stroke-width: 2.4; }
.tick-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tick-row li { padding: 8px 14px; border-radius: 999px; background: var(--black-50); border: 1px solid var(--line); }
.tick-row--light li { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #fff; }
.tick-row--light svg { color: var(--orange-300); }
.tick-row--col { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
.tick-row--col li { background: none; border: 0; padding: 0; font-weight: 400; color: var(--ink); font-size: 1.0625rem; align-items: flex-start; gap: 12px; }
.tick-row--col svg { margin-top: 4px; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--orange-100); }

/* ---------- 4. Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 50px; padding: 0 1.6rem;
  border: 1.5px solid transparent; border-radius: 999px !important; font-size: 1rem; font-weight: 700; line-height: 1; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn svg { width: 18px; height: 18px; stroke-width: 2.2; transition: transform var(--t-fast) var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg:last-child { transform: translateX(4px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--orange) !important; color: var(--on-orange) !important; }
.btn--primary:hover { background: #F0802B; box-shadow: 0 14px 28px -12px rgba(229, 113, 25, .65); }
.btn--dark { background: var(--black); color: #fff; }
.btn--dark:hover { background: var(--black-800); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .6); }
.btn--ghost { border-color: var(--line-strong); color: var(--black); background: #fff; }
.btn--ghost:hover { border-color: var(--black); }
.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: 0 1.25rem; font-size: .9375rem; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--black); transition: color var(--t-fast), gap var(--t-fast) var(--ease); }
.link-arrow svg { width: 18px; height: 18px; stroke-width: 2.2; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover { color: var(--orange-ink); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow--lg { font-size: 1.0625rem; justify-self: end; }
.round-btn { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: inline-grid; place-items: center; color: var(--black); background: #fff; transition: transform var(--t-fast) var(--ease), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.round-btn svg { width: 20px; height: 20px; stroke-width: 2.2; }
.round-btn:hover { background: var(--black); color: #fff; border-color: var(--black); transform: translateY(-2px); }
.round-btn:disabled { opacity: .4; pointer-events: none; }

/* ---------- 5. Forms ---------- */
.card-form { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.field { position: relative; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  width: 100%; height: 53px; padding: 24px 16px 8px; background: #fff; color: var(--ink); font-size: 1rem;
  border: 1.5px solid var(--line-strong); border-radius: 14px; appearance: none; -webkit-appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.field textarea { height: auto; min-height: 92px; padding-top: 28px; resize: vertical; line-height: 1.5; }
.field select { padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' 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 14px center; }
.field label {
  position: absolute; left: 17px; top: 18px; max-width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 1rem; pointer-events: none; transform-origin: left top;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field--select label, .field--static label { transform: translateY(-11px) scale(.78); }
.field input:focus + label, .field textarea:focus + label, .field select:focus + label { color: var(--black); font-weight: 700; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--black-400); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--black); box-shadow: 0 0 0 4px rgba(0, 0, 0, .14); outline: none; }
.field--static input { padding-top: 26px; }
.field.is-valid input, .field.is-valid textarea { border-color: var(--black); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px top 19px; padding-right: 44px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--orange-ink); box-shadow: 0 0 0 4px rgba(181, 80, 10, .12); }
.field.is-invalid label { color: var(--orange-ink); }
.field__err { display: none; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: .8125rem; font-weight: 700; color: var(--orange-ink); line-height: 1.35; }
.field__err svg { width: 16px; height: 16px; margin-top: 1px; stroke-width: 2.2; }
.is-invalid > .field__err, .field__err.is-shown { display: flex; animation: errIn .25s var(--ease); }
@keyframes errIn { from { opacity: 0; transform: translateY(-4px); } }
.form-title { font-size: 1.5rem; margin-bottom: 6px; }
.form-title span { font-weight: 400; color: var(--muted); font-size: 1rem; }
.form-sub { color: var(--muted); font-size: .9375rem; margin-bottom: 22px; }
.form-sub a { color: var(--black); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.check { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 6px; cursor: pointer; font-size: .9375rem; color: var(--ink); }
.check input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.check__box { flex: none; width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; background: #fff; color: #fff; transition: background-color var(--t-fast), border-color var(--t-fast); }
.check__box svg { width: 16px; height: 16px; stroke-width: 3; opacity: 0; transform: scale(.5); transition: transform var(--t-fast) var(--ease), opacity var(--t-fast); }
.check input:checked + .check__box { background: var(--black); border-color: var(--black); }
.check input:checked + .check__box svg { opacity: 1; transform: none; }
.check input:focus-visible + .check__box { outline: 3px solid var(--orange); outline-offset: 3px; }
.field__err--check { margin: 0 0 12px 36px; }
.captcha-slot:empty { display: none; }
.captcha-slot { margin: 8px 0 16px; }

/* Tabs */
.tabs { overflow: hidden; }
.tabs__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px; background: var(--black-50); border-bottom: 1px solid var(--line); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 10px 6px; border-radius: 14px; font-size: .8125rem; font-weight: 700; line-height: 1.2; color: var(--muted); text-align: center; transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.tab svg { width: 20px; height: 20px; }
.tab small { display: block; font-size: .7rem; font-weight: 400; }
.tab:hover { color: var(--black); background: rgba(255, 255, 255, .6); }
.tab[aria-selected="true"] { background: #fff; color: var(--black);}
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--orange); }
.tab[aria-selected="true"] svg { color: var(--orange-ink); }
.tabs__panel { padding: clamp(20px, 3vw, 32px); animation: panelIn .4s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } }

/* Step indicator (Free Quote) */
.steps-ind { display: flex; gap: 8px; margin: 0 0 22px; }
.steps-ind li { flex: 1; position: relative; padding-top: 12px; display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; color: var(--muted); }
.steps-ind li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--line); transition: background-color .4s; }
.steps-ind li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; background: var(--line); color: var(--black); transition: background-color .3s, color .3s; }
.steps-ind li.is-current { color: var(--black); }
.steps-ind li.is-current::before { background: var(--orange); }
.steps-ind li.is-current span { background: var(--black); color: #fff; }
.steps-ind li.is-done::before { background: var(--black); }
.steps-ind li.is-done span { background: var(--black); color: #fff; }
.js [data-steps] .step { display: none; }
.js [data-steps] .step.is-current { display: block; animation: panelIn .35s var(--ease); }
.step { border: 0; padding: 0; margin: 0; min-width: 0; }
.step-actions { display: flex; gap: 10px; flex-wrap: wrap; }
html:not(.js) [data-next], html:not(.js) [data-prev], html:not(.js) .steps-ind { display: none; }

/* ---------- 6. Header + mega menu ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); height: var(--hh); transition: height var(--t-med) var(--ease); }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(255, 255, 255, 0); border-bottom: 1px solid transparent; transition: background-color var(--t-med), border-color var(--t-med), box-shadow var(--t-med); }
.site-header.is-scrolled { --hh: 70px; }
.site-header.is-scrolled::before, .site-header.has-open::before { background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); border-color: var(--line); }
.site-header.has-open::before { background: #fff; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 3; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.header__inner { width: 100%; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.logo { position: relative; z-index: 2; display: block; flex: none; }
.logo img { height: 55px; width: auto; transition: height var(--t-med) var(--ease); }

.nav { display: flex; align-items: center; gap: 18px; flex: 1; justify-content: flex-end; height: 100%; }
.nav__list { display: flex; align-items: center; height: 100%; }
.nav__item { display: flex; align-items: center; height: 100%; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; font-size: .9688rem; font-weight: 700; color: var(--ink); border-radius: 999px; transition: color var(--t-fast); }
.nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--black-300); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease), background-color var(--t-fast); }
.nav__link:hover, .nav__item.is-open > .nav__link { color: var(--black); }
.nav__link:hover::after, .nav__item.is-open > .nav__link::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--black); }
.nav__link.is-active::after { transform: scaleX(1); background: var(--orange); }
.chev { width: 16px; height: 16px; stroke-width: 2.4; transition: transform var(--t-med) var(--ease); }
.nav__item.is-open .chev { transform: rotate(180deg); }
.nav__cta { flex: none; min-height: 46px; padding: 0 1.3rem; font-size: .9375rem; }
.header__call, .nav-toggle { display: none; }

/* load-in */
.logo { animation: slideIn .8s var(--ease) backwards; }
.nav__item { animation: navIn .7s var(--ease) backwards; }
.nav__item:nth-child(1) { animation-delay: .15s; } .nav__item:nth-child(2) { animation-delay: .22s; } .nav__item:nth-child(3) { animation-delay: .29s; } .nav__item:nth-child(4) { animation-delay: .36s; } .nav__item:nth-child(5) { animation-delay: .43s; }
.nav__cta { animation: navIn .7s .5s var(--ease) backwards; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-16px); } }
@keyframes navIn { from { opacity: 0; transform: translateY(-10px); } }
.sub-header.twenty {
  margin-top: 75px;
}
a:hover{
  text-decoration: none !important;
}
/* mega panel */
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--sh-3); visibility: hidden; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .22s var(--ease), transform .28s var(--ease), visibility 0s .28s; }
.nav__item.is-open > .mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.mega__inner { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding: 32px 0 36px; }
.mega__body { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 1fr); gap: 36px; }
.mega__panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__col { display: flex; flex-direction: column; padding: 2px 26px; border-right: 1px solid var(--line); }
.mega__col:first-child { padding-left: 4px; }
.mega__col:last-child { border-right: 0; padding-right: 4px; }
.mega__row { display: flex; align-items: flex-start; gap: 13px; padding: 20px 10px; margin: 0 -10px; border-radius: 12px; transition: background-color var(--t-fast); }
.mega__row strong { display: block; font-size: .9375rem; line-height: 1.3; color: var(--ink); transition: color var(--t-fast); }
.mega__row small { display: block; font-size: .8125rem; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.mega__ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--black-50); color: var(--black); border: 1px solid var(--line); transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease); }
.mega__ic svg { width: 19px; height: 19px; }
.mega__row:hover { background: var(--black-50); }
.mega__row:hover strong { color: var(--orange-ink); }
.mega__row:hover .mega__ic { background: var(--orange-100); color: var(--orange-ink); transform: rotate(-6deg); }
.mega__promo { position: relative; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--black-50); border: 1px solid var(--line); transition: background-color var(--t-fast); }
.mega__promo:hover { background: var(--black-100); }
.mega__promo-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.mega__promo-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--line-strong); color: var(--black); }
.mega__promo-ic svg { width: 17px; height: 17px; }
.mega__promo-body { flex: 1 1 auto; min-width: 0; }
.mega__promo-body strong { display: block; font-size: .875rem; line-height: 1.25; }
.mega__promo-body small { display: block; font-size: .8125rem; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.mega__promo-cta { display: inline-flex; align-items: center; margin-left: 44px; padding: 7px 14px; border-radius: 999px; background: var(--orange); color: var(--on-orange); font-size: .75rem; font-weight: 700; white-space: nowrap; transition: background-color var(--t-fast), transform var(--t-fast) var(--ease); }
.mega__promo-cta:hover { background: #F0802B; transform: translateY(-1px); }
.mega__aside { padding-left: 32px; border-left: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; text-align: center; }
.mega__aside h3 { font-size: 1.0625rem; margin-bottom: 14px; }
.mega__abtn { display: block; width: 100%; padding: 10px 14px; margin-bottom: 10px; border-radius: 8px; font-size: .9375rem; font-weight: 700; text-align: center; border: 1.5px solid transparent; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.mega__abtn--solid { background: var(--black); color: #fff; border-color: var(--black); }
.mega__abtn--solid:hover { background: var(--orange); border-color: var(--orange); }
.mega__abtn--outline { background: transparent; color: var(--black); border-color: var(--orange); }
.mega__abtn--outline:hover { background: var(--orange); color: #fff; }

.has-mega--compact { position: relative; }
.mega--compact { left: 50%; right: auto; width: 340px; top: calc(100% - 8px); margin-left: -170px; border: 1px solid var(--line); border-radius: 22px; transform: translateY(8px); }
.nav__item.is-open > .mega--compact { transform: none; }
.mega--compact .mega__inner { display: block; width: auto; padding: 18px 18px 14px; }
.mega__compact-title { font-size: .75rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: 8px; }

/* ---------- 7. Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--hh) + clamp(36px, 5vw, 40px)) 0 clamp(50px, 8vw, 80px); background: linear-gradient(180deg, #fff 0%, var(--black-50) 100%); }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; }
.orb--o { width: 520px; height: 520px; right: -140px; top: -120px; background: radial-gradient(closest-side, rgba(229, 113, 25, .16), transparent); }
.orb--p { width: 640px; height: 640px; left: -220px; bottom: -260px; background: radial-gradient(closest-side, rgba(0, 0, 0, .12), transparent); }

/* Decorative background layers — soft mesh, dot grid, morphing blob, fine line work.
   Animations use the individual `translate`/`rotate`/`scale` properties so they
   don't fight the JS parallax, which writes `transform`. */
.hero__mesh { position: absolute; inset: 0; background:
    radial-gradient(60% 55% at 78% 38%, rgba(253, 235, 221, .9), transparent 70%),
    radial-gradient(40% 45% at 12% 8%, rgba(255, 246, 238, .95), transparent 70%),
    radial-gradient(45% 40% at 40% 100%, rgba(236, 236, 236, .6), transparent 70%); }
.hero__dots { position: absolute; top: 6%; right: 2%; width: min(46vw, 620px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0, 0, 0, .14) 1.1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.hero__blob { position: absolute; right: 4%; top: 50%; width: min(38vw, 500px); aspect-ratio: 1; margin-top: calc(min(38vw, 500px) / -2); }
.hero__blob > span { position: absolute; inset: 0; border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  background: linear-gradient(135deg, rgba(229, 113, 25, .22), rgba(245, 164, 106, .12) 55%, rgba(255, 246, 238, 0));
  filter: blur(28px); animation: heroBlob 22s ease-in-out infinite alternate; }
.hero__lines { position: absolute; right: -180px; top: -200px; width: 560px; height: 560px; fill: none; stroke: rgba(229, 113, 25, .18); stroke-width: 1;
  animation: heroSpin 90s linear infinite; }
.hero__wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(90px, 14vw, 200px); fill: none; stroke-width: 1; }
.hero__wave path:first-child { stroke: rgba(229, 113, 25, .16); }
.hero__wave path:last-child { stroke: rgba(0, 0, 0, .07); }
.hero__mark { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; animation: heroFloat 9s ease-in-out infinite alternate; }
.hero__mark:nth-of-type(even) { animation-duration: 12s; animation-delay: -4s; }
.hero__mark--plus { background: linear-gradient(var(--orange), var(--orange)) center / 100% 2px no-repeat, linear-gradient(var(--orange), var(--orange)) center / 2px 100% no-repeat; opacity: .35; }
.hero__mark--sm { width: 10px; height: 10px; }
.hero__mark--ring { width: 18px; height: 18px; border: 1.5px solid rgba(0, 0, 0, .18); border-radius: 50%; }
.hero__mark--dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); opacity: .3; }
@keyframes heroBlob {
  0%   { border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; rotate: 0deg; scale: 1; }
  50%  { border-radius: 58% 42% 38% 62% / 55% 62% 38% 45%; scale: 1.05; }
  100% { border-radius: 36% 64% 52% 48% / 62% 44% 56% 38%; rotate: 25deg; scale: .97; }
}
@keyframes heroSpin { to { rotate: 360deg; } }
@keyframes heroFloat { from { translate: 0 0; } to { translate: 6px -12px; } }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(32px, 5vw, 80px); align-items: center; }

/* Rotating headline — ported from itniche.com's typewriter transition */
.hero-h { font-size: clamp(1.9rem, 2.4vw + 1rem, 3.1rem); line-height: 1.18; letter-spacing: -.02em; }
.hero-h__line, .hero-h__rotate { display: block; }
.hero-h__brand, .hero-h__rotate { color: var(--orange); }
.hero-h__wrap { display: inline-block; min-height: 1em; border-right: .1em solid var(--orange); padding-right: 6px; }
.hero-h__rotate { white-space: nowrap; }
/* small link that fades in after a typed word (e.g. "Outreach ClickSetGo.app"); while hidden it's out of the tab order */
.hero-h__tag {
  display: inline-block; margin-left: .6em; vertical-align: middle;
  font-size: max(1.15rem, .3em); font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--black);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--black-300);
  opacity: 0; visibility: hidden; translate: -6px 0;
  transition: opacity .3s var(--ease), translate .3s var(--ease), visibility 0s linear .3s, text-decoration-color var(--t-fast);
}
.hero-h__tag.is-on { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.hero-h__tag:hover, .hero-h__tag:focus-visible { text-decoration-color: currentColor; }
.hero__copy .eyebrow { margin-bottom: 5px; }
.hero__copy .lead { margin: 10g116px 0 15px; }
.hero-in { opacity: 0; animation: heroIn .9s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.report { padding: 22px; margin-top: 0px; transition: border-color var(--t-med), box-shadow var(--t-med); }
.report__head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.report__ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--orange-100); color: var(--orange-ink); }
.report__ic svg { width: 24px; height: 24px; }
.report__title { font-size: 1.25rem; line-height: 1.2; }
.report__sub { font-size: .9375rem; color: var(--muted); }
.report__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.report:focus-within { border-color: var(--black-300); box-shadow: var(--sh-3); }

.hero__art { position: relative; }
.hero-il { width: 100%; height: auto; display: block; overflow: visible; }
.flow-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.flow-chips li { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 700; color: var(--black); padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.flow-chips li:not(:last-child)::after { content: "→"; color: var(--orange-ink); margin-left: 6px; font-weight: 900; }

/* ---------- 8. Promo + intro ---------- */
/* "Our Current Promotions" — ported verbatim from itniche.com: orange tab overlapping a black quote box */
.hero__promo { margin-top: clamp(28px, 4vw, 48px); max-width: 560px; }
.hero__promo-tag { display: inline-block; background: linear-gradient(0deg, #D65A00 0%, #FC822F 100%); color: #fff; font-size: .8125rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; padding: 13px 22px; border-radius: 8px; margin: 0 0 -14px; position: relative; z-index: 1; }
.hero__promo-box { background: var(--black); color: #fff; font-size: 1.0625rem; line-height: 1.65; padding: 34px 24px 22px; border-radius:0px 8px 8px 8px; margin: 0; }
.intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 96px); align-items: center; }
.intro h2 { font-size: clamp(1.8rem, 2.2vw + 1rem, 2.8rem); }

/* ---------- 9. Customized services ---------- */
/* Content and layout ported from itniche.com's "Customized Services Designed for Your Audience" —
   the source illustration is a purchased stock graphic of people, so it's replaced here with an
   abstract website/e-commerce/SEO illustration built from this site's own icon system. */
.services__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.services__art { position: relative; }
.services__body .lead { margin: 16px 0 32px; }
.services__list { display: grid; gap: 22px; margin-bottom: 32px; }
.services__list li { display: flex; align-items: flex-start; gap: 16px; }
.services__list h3 { font-size: 1.125rem; margin-bottom: 4px; }
.services__list p { color: var(--muted); }
.services__ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--orange-100); color: var(--orange-ink); }
.services__ic svg { width: 21px; height: 21px; }
.btn-line { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--black); color: var(--black); font-size: .875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 16px 28px; border-radius: 8px; transition: background-color var(--t-fast), color var(--t-fast); }
.btn-line svg { width: 18px; height: 18px; stroke-width: 2.2; transition: transform var(--t-fast) var(--ease); }
.btn-line:hover { background: var(--black); color: #fff; }
.btn-line:hover svg { transform: translateX(4px); }

/* ---------- 10. Group promotions ---------- */
.promo-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: clamp(32px, 5vw, 72px); border-radius: var(--r-xl); color: #fff; background: radial-gradient(120% 140% at 100% 0%, rgba(229, 113, 25, .22) 0%, var(--black) 45%, var(--black) 100%); box-shadow: var(--sh-3); }
.promo-card__copy { position: relative; z-index: 1; }
.promo-card h2 { color: #fff; font-size: clamp(1.9rem, 2.4vw + 1rem, 3.1rem); margin-bottom: 14px; }
.promo-card__copy p { color: rgba(255, 255, 255, .8); margin-bottom: 28px; max-width: 46ch; }
.promo-card__shapes { position: absolute; inset: 0; pointer-events: none; }
.ps { position: absolute; border-radius: 50%; }
.ps--1 { width: 360px; height: 360px; right: -80px; top: -140px; border: 1.5px solid rgba(255, 255, 255, .14); }
.ps--2 { width: 220px; height: 220px; left: 36%; bottom: -120px; background: radial-gradient(closest-side, rgba(229, 113, 25, .35), transparent); }
.ps--3 { width: 10px; height: 10px; left: 46%; top: 22%; background: var(--orange); box-shadow: 0 0 0 8px rgba(229, 113, 25, .18); }
.promo-card__notifs { position: relative; z-index: 1; display: grid; gap: 14px; }
.notif { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.notif strong { display: block; color: #fff; line-height: 1.25; }
.notif small { display: block; color: rgba(255, 255, 255, .72); font-size: .875rem; }
.notif__ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--orange); color: var(--on-orange); }
.notif__ic--muted { background: rgba(255, 255, 255, .14); color: #fff; }
.notif__ic svg { width: 22px; height: 22px; }
.notif__badge { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 900; background: var(--orange); color: var(--on-orange); animation: pulse 2.4s ease-in-out infinite; }
.notif:nth-child(2) { margin-left: 28px; } .notif:nth-child(3) { margin-left: 8px; }
.js .promo-card .notif { opacity: 0; translate: 40px 0; }
.js .promo-card.in .notif { opacity: 1; translate: 0 0; transition: opacity .8s var(--ease) calc(var(--i) * 160ms + 350ms), translate .8s var(--ease) calc(var(--i) * 160ms + 350ms); cursor: pointer; }
.js .promo-card.in .notif:hover{border: solid 1px #E57119; box-shadow: 0 14px 28px -12px rgba(229, 113, 25, .65);}
#group-promotions{padding: 0;}
#experience, .ourniche{background-color: #ececec;}
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(229, 113, 25, .22); } }

/* ---------- 11. AI section ---------- */
.ai__glow { position: absolute; width: 720px; height: 720px; top: -260px; right: -200px; background: radial-gradient(closest-side, rgba(229, 113, 25, .2), transparent); pointer-events: none; }
.ai > .container { position: relative; }
.ai__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ai__viz { justify-self: center; width: 100%; max-width: 460px; }
.ai-il { width: 100%; height: auto; display: block; overflow: visible; }
.ai-trunk { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 2; }
.ai-trunk-flow { fill: none; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 4 9; stroke-linecap: round; animation: dash 1.4s linear infinite; opacity: .8; }
.ai-dots circle { fill: var(--orange-300); }
.ai-node rect { fill: var(--black-700); stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; }
.ai-node--end rect { stroke: var(--orange); }
.ai-node .ic-bg { fill: rgba(229, 113, 25, .16); stroke: rgba(229, 113, 25, .55); stroke-width: 1.5; }
.ai-node use { fill: none; stroke: var(--orange-300); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ai-node .t1 { font-size: 17px; font-weight: 700; fill: #fff; }
.ai-node .t2 { font-size: 13px; fill: rgba(255, 255, 255, .74); }
.ai-node .n { font-size: 12px; font-weight: 900; fill: rgba(255, 255, 255, .35); text-anchor: end; letter-spacing: .1em; }
.ai-sat path { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; }
.ai-sat circle { fill: var(--black-700); stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; }
.ai-sat circle.o { stroke: var(--orange); }
.ai-chev path { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.js .ai-node { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .ai__viz.in .ai-node { opacity: 1; transform: none; }
.ai-node:nth-child(2) { transition-delay: .15s; } .ai-node:nth-child(3) { transition-delay: .3s; } .ai-node:nth-child(4) { transition-delay: .45s; } .ai-node:nth-child(5) { transition-delay: .6s; }
.js .ai-chev, .js .ai-sat { opacity: 0; transition: opacity .8s .9s; }
.js .ai__viz.in .ai-chev, .js .ai__viz.in .ai-sat { opacity: 1; }

/* ---------- 12. Products + experience ---------- */
.prod, .post { display: flex; flex-direction: column; position: relative; background: #fff; border: 0px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.prod:hover, .post:hover { transform: translateY(-8px); border-color: var(--black-300); box-shadow: var(--sh-2); }
.prod__art, .post__art { background: var(--black-50); overflow: hidden; border-bottom: 1px solid var(--line); }
.prod__art svg, .post__art svg { width: 100%; height: auto; display: block; transition: transform .6s var(--ease); }
.prod:hover .prod__art svg, .post:hover .post__art svg { transform: scale(1.035); }
.prod__body, .post__body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.prod__body h3 { margin-bottom: 8px; font-size: 1.375rem; }
.prod__body p { color: var(--muted); margin-bottom: 18px; }
.prod__body .link-arrow { margin-top: auto; }
.prod .link-arrow::after, .post h3 a::after { content: ""; position: absolute; inset: 0; }

.xp-sec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.xp-sec h2 { margin-bottom: 22px; }
.xp-sec .lead { margin-bottom: 8px; }
.xp { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0px auto 0px; }
.xp__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xp-track { fill: none; stroke: var(--black-100); stroke-width: 4; }
.xp-arc { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; }
.xp-dash { fill: none; stroke: var(--black-300); stroke-width: 1.5; stroke-dasharray: 2 9; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: spin 80s linear infinite; }
.js .xp-arc { stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease) .2s; }
.js .xp.in .xp-arc { stroke-dashoffset: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.xp__core { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.xp__num { font-size: clamp(5.5rem, 13vw, 9.5rem); font-weight: 900; line-height: .9; letter-spacing: -.05em; color: var(--black); font-variant-numeric: tabular-nums; }
.xp__num sup { font-size: .5em; color: var(--orange); vertical-align: top; position: relative; top: .1em; margin-left: .04em; }
.xp__unit { margin-top: 10px; font-size: .8125rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.xp__nodes li { position: absolute; width: 64px; height: 64px; left: calc(50% + 44% * cos(var(--a))); top: calc(50% + 44% * sin(var(--a))); margin: -32px 0 0 -32px; }
.xp__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 1px solid var(--line-strong); color: var(--black); box-shadow: var(--sh-1); transition: background-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease); }
.xp__ic svg { width: 26px; height: 26px; }
.xp__nodes li:hover .xp__ic { background: var(--orange); color: var(--on-orange); transform: scale(1.08); }
.xp__nodes strong { padding: 2px 9px; background: #fff; border-radius: 999px; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: .8125rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--black); white-space: nowrap; }
.js .xp__nodes li { opacity: 0; scale: .6; transition: opacity .6s var(--ease), scale .6s var(--ease); }
.js .xp.in .xp__nodes li { opacity: 1; scale: 1; }
.xp__nodes li:nth-child(1) { transition-delay: .4s; } .xp__nodes li:nth-child(2) { transition-delay: .6s; } .xp__nodes li:nth-child(3) { transition-delay: .8s; } .xp__nodes li:nth-child(4) { transition-delay: 1s; } .xp__nodes li:nth-child(5) { transition-delay: 1.2s; }

/* ---------- 13. Testimonials / blog / follow ---------- */
.slider-ctrl { display: flex; gap: 10px; justify-self: end; }
.slider { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); border-radius: 12px; }
.slider::-webkit-scrollbar { display: none; }
.slider__track { display: flex; gap: 24px; padding: 12px 2px 28px; width: max-content; min-width: 100%; }
.quote { position: relative; flex: 0 0 min(560px, 84vw); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(28px, 4vw, 40px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); }
.quote:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: var(--black-300); }
.quote__mark { width: 56px; height: 56px; color: var(--orange-100); stroke: none; fill: currentColor; transition: color var(--t-med); }
.quote:hover .quote__mark { color: var(--orange); }
.quote blockquote p { font-size: 1.1875rem; line-height: 1.65; color: var(--ink); }
.quote figcaption { display: flex; align-items: center; gap: 14px; }
.quote figcaption strong { display: block; line-height: 1.25; color: var(--black); }
.quote figcaption small { color: var(--muted); font-size: .875rem; }
.quote__mono { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: var(--black); color: #fff; font-weight: 900; letter-spacing: .04em; }
.slider-dots { display: flex; justify-content: center; gap: 8px; }
.slider-dots span { width: 8px; height: 8px; border-radius: 8px; background: var(--black-200); transition: width var(--t-med) var(--ease), background-color var(--t-med); }
.slider-dots span.is-active { width: 28px; background: var(--orange); }

.post__cat { font-size: .75rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: 8px; }
.post__body h3 { margin-bottom: 10px; font-size: 1.3125rem; }
.post__body p { color: var(--muted); margin-bottom: 5px; }
.post .link-arrow { margin-top: auto; }
.post:hover .link-arrow { color: var(--orange-ink); }
.post:hover .link-arrow svg { transform: translateX(4px); }
footer {
  padding: 0px 0 30px 0 !important;
}
.post-date{
  font-size: 13px; color: #5A5A5A;
}
.follow { padding-block: 30px; border-top: 1px solid var(--line); background-color: #ffffff;}
.follow__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.follow__social { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.follow h2 { font-size: 1.375rem; letter-spacing: -.01em; }
.social { display: flex; gap: 10px; }
.social a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--black); transition: transform var(--t-fast) var(--ease), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.social svg { width: 22px; height: 22px; }
.social a:hover { transform: translateY(-3px); background: var(--black); border-color: var(--black); color: #fff; }
.refer { display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 1.4rem; border-radius: 999px; background: var(--orange-50); border: 1.5px solid var(--orange-100); color: var(--black); font-weight: 700; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast), background-color var(--t-fast); }
.refer > svg:first-child { color: var(--orange-ink); }
.refer__go { width: 18px; height: 18px; stroke-width: 2.2; transition: transform var(--t-fast) var(--ease); }
.refer:hover { transform: translateY(-2px); border-color: var(--orange); background: var(--orange-100); }
.refer:hover .refer__go { transform: translateX(4px); }

/* ---------- 14. Footer + dialog ---------- */
.site-footer { position: relative; background: var(--black-900); color: rgba(255, 255, 255, .78); padding-top: clamp(56px, 7vw, 70px) !important; font-size: .9375rem; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--orange), var(--black-400) 55%, transparent); }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 40px; }
.wordmark { display: inline-flex; align-items: baseline; font-size: 2.25rem; line-height: 1; letter-spacing: -.03em; margin-bottom: 25px;}
.wordmark__it { font-weight: 900; color: var(--orange); }
.wordmark__niche { font-weight: 300; color: #fff; }
.footer__tag { margin: 14px 0 20px; color: rgba(255, 255, 255, .7); line-height: 1.6; }
.footer__contact { display: grid; gap: 10px; margin-bottom: 24px; }
.footer__contact li { display: flex; align-items: center; gap: 10px; }
.footer__contact svg { width: 18px; height: 18px; color: var(--orange-300); }
.footer__contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__h { font-size: .75rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-300); margin-bottom: 18px; }
.footer__col ul { display: grid; gap: 4px; }
.footer__two { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.footer__col a, .footer__legal a { position: relative; display: inline-flex; align-items: center; min-height: 32px; transition: color var(--t-fast), transform var(--t-fast) var(--ease); }
.footer__col a::after, .footer__legal a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease); }
.footer__col a:hover, .footer__legal a:hover { color: #fff; }
.footer__col a:hover::after, .footer__legal a:hover::after { transform: scaleX(1); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 32px; padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8125rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer__copy { color: rgba(255, 255, 255, .62); }
.site-footer :focus-visible { outline-color: var(--orange-300); }

.dialog { border: 0; padding: 0; width: min(580px, calc(100% - 32px)); max-height: calc(100dvh - 32px); border-radius: var(--r-xl); background: #fff; color: var(--ink); box-shadow: var(--sh-3); overflow: auto; overscroll-behavior: contain; }
.dialog[open] { animation: dlgIn .4s var(--ease); }
.dialog::backdrop { background: rgba(20, 15, 38, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fadeIn .3s; }
.dialog__form { position: relative; padding: clamp(24px, 4vw, 40px); }
.dialog__form .report__ic { margin-bottom: 16px; }
.dialog__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--black); transition: background-color var(--t-fast), transform var(--t-fast) var(--ease); }
.dialog__close:hover { background: var(--black-50); transform: rotate(90deg); }
.dialog__close svg { width: 22px; height: 22px; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- 15. Illustration system + scroll motion ---------- */
/* shared SVG vocabulary */
.c { fill: #fff; stroke: var(--line-strong); stroke-width: 1.5; }
.c.hl { stroke: var(--orange); }
.f-p { fill: var(--black); } .f-pl { fill: var(--black-200); } .f-o { fill: var(--orange); } .f-os { fill: var(--orange-100); } .f-soft { fill: var(--black-50); }
.il-line { fill: none; stroke: var(--black); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.il-o-line { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.il-thick { stroke-width: 4; }
.il-ring { fill: none; stroke: var(--black-300); stroke-width: 1.5; stroke-dasharray: 3 6; }
.il-track { fill: none; stroke: var(--black-100); stroke-width: 8; }
.il-arc { fill: none; stroke: var(--orange); stroke-width: 8; stroke-linecap: round; }
.il-growth { fill: none; stroke: var(--orange); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.il-label { font-size: 11px; font-weight: 900; letter-spacing: .12em; fill: var(--black); }
.il-icon, .il-o-icon, .il-inv-icon { fill: none; stroke: var(--black); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.il-o-icon { stroke: var(--orange); }
.il-inv-icon { stroke: #fff; stroke-width: 2; }
.il-btn-t { font-size: 12px; font-weight: 900; letter-spacing: .06em; fill: #fff; }
.il-lg { font-size: 20px; } .il-sm { font-size: 9px; }
.il-hub-t { font-size: 22px; font-weight: 900; fill: #fff; }
.il-node-t { font-size: 12px; font-weight: 700; fill: var(--black); }
.il-dash { fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 6 5; }
.il-pct { font-size: 44px; font-weight: 900; fill: var(--orange); }
.il-road { fill: none; stroke: #fff; stroke-width: 9; }
.il-badges circle { fill: var(--black); }
.il-badges text { fill: #fff; font-size: 12px; font-weight: 900; }
.flow { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 7; animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -22; } }
.fl { animation: floaty 7s ease-in-out infinite; }
.fl-b { animation-duration: 8.5s; animation-delay: -2s; }
.fl-c { animation-duration: 9.5s; animation-delay: -4.5s; }
@keyframes floaty { 50% { transform: translateY(-6px); } }
svg.is-paused *, svg.is-paused { animation-play-state: paused !important; }
.js .hero-il .il-growth { stroke-dashoffset: 1; animation: draw 1.8s 1.1s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Products & solutions: scroll-pinned card rail (large screens only) ----------
   main.js adds .is-pinned when the 3-across layout fits the viewport. The section then grows tall,
   its content sticks under the header, and scrolling through the extra height steps cards 4–6 in
   from the right one at a time; once the 6th has landed the section ends and normal scrolling resumes. */
.products__progress { display: none; }
.products.is-pinned { --pin-top: 70px; padding-block: 0; }
.products.is-pinned .products__pin {
  position: sticky; top: var(--pin-top);
  height: calc(100vh - var(--pin-top)); height: calc(100svh - var(--pin-top));
  display: flex; flex-direction: column; justify-content: center;
}
.products.is-pinned .section-head { margin-bottom: clamp(20px, 3vh, 36px); }
/* Clip to the container so only three cards show; the margin keeps hover lift and shadows visible */
.products.is-pinned .products__viewport { overflow: clip; overflow-clip-margin: 28px; }
.products.is-pinned .grid--products {
  display: flex; gap: var(--rail-gap);
  translate: var(--rail-x, 0px) 0; will-change: translate;
}
.products.is-pinned .grid--products .prod {
  flex: 0 0 var(--card-w);
  /* --v: how much of the card is inside the rail (0 = off-rail, 1 = fully in view) */
  opacity: calc(.18 + .82 * var(--v, 1)); scale: calc(.93 + .07 * var(--v, 1)); translate: none;
  transition: transform var(--t-med) var(--ease), border-color var(--t-med), box-shadow var(--t-med);
}
.products.is-pinned .products__progress {
  display: flex; align-items: center; gap: 16px;
  margin-top: clamp(18px, 3vh, 32px);
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.products__count b { color: var(--black); font-weight: 900; }
.products__bar { position: relative; flex: 0 0 180px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.products__bar i { position: absolute; inset: 0; background: var(--orange); transform-origin: left center; transform: scaleX(var(--rail-p, 0)); }
.products__hint { margin-left: auto; transition: opacity .4s var(--ease); }
.products.is-done .products__hint { opacity: 0; }
/* Shorter laptop screens: compact the pinned cards so the whole rail still fits under the header */
@media (max-height: 900px) {
  .products.is-pinned .prod__art { height: clamp(110px, 24vh, 240px); }
  .products.is-pinned .prod__art svg { height: 100%; }
  .products.is-pinned .prod__body { padding: 18px 24px 20px; }
  .products.is-pinned .prod__body p { margin-bottom: 12px; font-size: .9375rem; }
  .products.is-pinned .section-head h2 { font-size: clamp(1.9rem, 4.4vh, 2.75rem); }
}
@media (max-height: 760px) {
  .products.is-pinned .prod .chips { display: none; }
}

/* scroll-triggered reveal (translate/scale are separate properties so card hovers can still use transform) */
.js [data-reveal] {
  opacity: 0; translate: 0 32px;
  transition: opacity .85s var(--ease) calc(var(--d, 0) * 85ms), translate .85s var(--ease) calc(var(--d, 0) * 85ms), scale .85s var(--ease) calc(var(--d, 0) * 85ms),
              transform var(--t-med) var(--ease), border-color var(--t-med), box-shadow var(--t-med);
}
.js [data-reveal="left"] { translate: -44px 0; }
.js [data-reveal="scale"] { translate: none; scale: .94; }
.js [data-reveal="fade"] { translate: none; }
.js [data-reveal].in { opacity: 1; translate: 0 0; scale: 1; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js .promo-card .notif, .js .xp__nodes li, .js .ai-node, .js .ai-chev, .js .ai-sat { opacity: 1 !important; translate: none !important; scale: none !important; transform: none !important; }
  .js .xp-arc, .js .hero-il .il-growth { stroke-dashoffset: 0 !important; }
  .hero-in, .logo, .nav__item, .nav__cta { opacity: 1 !important; animation: none !important; }
  .fl, .flow, .ai-trunk-flow, .xp-dash { animation: none !important; }
  .hero__blob > span, .hero__lines, .hero__mark { animation: none !important; }
}

/* ---------- 16. Process (strategy → research → result) ---------- */
.process { --pr-yellow: #F6C945; --pr-cyan: #5FDDEB; --pr-red: #E84A4A; }
.process__steps { position: relative; }
.pr-list { position: relative; z-index: 1; display: grid; gap: 56px; }
.pr-step { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 5vw, 72px); }
.pr-step--top { align-items: start; }
.pr-step--end { align-items: end; }
.pr-step--flip .pr-art { order: 2; }
.pr-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.pr-copy { max-width: 30rem; }
.pr-step--top .pr-copy { padding-top: clamp(0px, 3vw, 40px); padding-left: 15px; }
.pr-step--end .pr-copy { padding-bottom: clamp(24px, 4vw, 56px); padding-left: 15px;}
.pr-num { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; font-size: 1.375rem; font-weight: 900; color: var(--black); }
.pr-num svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--c); stroke-width: 3.5; stroke-linecap: round; }
.pr-copy h3 { margin-bottom: 14px; font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.pr-copy p { font-size: 14px; line-height: 1.55; color: var(--black-700); }

/* scene vocabulary */
.pr-scene .ln { fill: none; stroke: var(--black); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pr-scene .fw { fill: #fff; }
.pr-scene .fk { fill: var(--black); }
.pr-scene .pr-marker { stroke-width: 4; }
.pr-scene .wc { filter: url(#pr-wc); opacity: .85; }
.pr-scene .wc--2 { opacity: .55; }
.wc--y { fill: var(--pr-yellow); }
.wc--c { fill: var(--pr-cyan); }

/* connector between scenes (drawn with scroll in main.js) */
.pr-link { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pr-link path { fill: none; stroke: var(--black); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* draw-on reveal: every .ln gets pathLength=1 and a --i stagger index from main.js */
.js .pr-scene .ln {
  stroke-dasharray: 1 1; stroke-dashoffset: 1; fill-opacity: 0;
  transition: stroke-dashoffset 1s var(--ease) calc(.25s + var(--i, 0) * 38ms), fill-opacity .6s ease calc(.75s + var(--i, 0) * 38ms);
}
.js .pr-step.in .pr-scene .ln { stroke-dashoffset: 0; fill-opacity: 1; }
.js .pr-scene .wc { opacity: 0; transform: scale(.82); transform-box: fill-box; transform-origin: 30% 80%; transition: opacity 1.4s ease .1s, transform 1.6s var(--ease) .1s; }
.js .pr-step.in .pr-scene .wc { opacity: .85; transform: none; }
.js .pr-step.in .pr-scene .wc--2 { opacity: .55; transition-delay: .5s; }
.js .pr-num path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) .35s; }
.js .pr-num.in path { stroke-dashoffset: 0; }
.js .pr-link path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }

/* idle loops (start once the scene has drawn in) */
.pr-float, .pr-write, .pr-sway, .pr-wave > *, .pr-leaf, .pr-burst, .pr-five { transform-box: view-box; }
.pr-step.in .pr-float { animation: prFloat 6s ease-in-out 2s infinite; }
.pr-step.in .pr-float--b { animation-duration: 7.5s; animation-delay: 2.6s; }
.pr-step.in .pr-float--c { animation-duration: 8.5s; animation-delay: 3.1s; }
@keyframes prFloat { 50% { transform: translateY(-8px) rotate(6deg); } }
.pr-write { transform-origin: 402px 176px; }
.pr-step.in .pr-write { animation: prWrite 1.6s ease-in-out 2.2s infinite; }
@keyframes prWrite { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 50% { transform: rotate(1.5deg); } 75% { transform: rotate(-2deg); } }
.pr-sway { transform-origin: 0 30px; }
.pr-sway--b { transform-origin: 128px 40px; }
.pr-step.in .pr-sway { animation: prSway 5s ease-in-out 2s infinite; }
.pr-step.in .pr-sway--b { animation-duration: 6s; animation-delay: 2.4s; }
@keyframes prSway { 50% { transform: rotate(2.2deg); } }
.pr-step.in .pr-wave > * { animation: prWave 1.8s ease-in-out 2.2s infinite both; }
.pr-step.in .pr-wave > :nth-child(2) { animation-delay: 2.4s; }
.pr-step.in .pr-wave > :nth-child(3) { animation-delay: 2.6s; }
@keyframes prWave { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
.pr-leaf { transform-origin: 40px 420px; }
.pr-step--end .pr-leaf { transform-origin: 284px 360px; }
.pr-step.in .pr-leaf { animation: prSway 4.5s ease-in-out 2s infinite; }
.pr-burst { transform-origin: 303px 100px; }
.pr-step.in .pr-burst { animation: prBurst 2.4s var(--ease) 2.2s infinite; }
@keyframes prBurst { 0%, 100% { transform: scale(.85); opacity: .35; } 18% { transform: scale(1.12); opacity: 1; } 45% { transform: scale(1); opacity: 1; } }
.pr-five--l { transform-origin: 246px 184px; }
.pr-five--r { transform-origin: 358px 184px; }
.pr-step.in .pr-five--l { animation: prFiveL 2.4s var(--ease) 2.2s infinite; }
.pr-step.in .pr-five--r { animation: prFiveR 2.4s var(--ease) 2.2s infinite; }
@keyframes prFiveL { 0%, 100% { transform: rotate(-5deg); } 18%, 45% { transform: rotate(0); } }
@keyframes prFiveR { 0%, 100% { transform: rotate(5deg); } 18%, 45% { transform: rotate(0); } }

@media (max-width: 880px) {
  .pr-step, .pr-step--top, .pr-step--end { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .pr-step--flip .pr-art { order: 0; }
  .pr-art { max-width: 560px; }
  .pr-step--top .pr-copy, .pr-step--end .pr-copy { padding: 0; }
  .pr-link { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .pr-scene .ln, .js .pr-num path, .js .pr-link path { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; }
  .js .pr-scene .wc { opacity: .85 !important; transform: none !important; }
  .pr-float, .pr-write, .pr-sway, .pr-wave > *, .pr-leaf, .pr-burst, .pr-five { animation: none !important; }
}