/**
 * i2cv — Main Stylesheet
 * Bootstrap 5.3 compatible. Import after variables.css + icons.css.
 * Requires Google Fonts: Outfit (display) + Manrope (body).
 */

/* -------------------------------------------------------------------------- */
/* Fonts (link in HTML preferred; fallback import)                            */
/* -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap");

/* -------------------------------------------------------------------------- */
/* Reset / base                                                               */
/* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

body {
  margin: 0;
  font-family: var(--i2-font-body);
  font-size: var(--i2-fs-base);
  font-weight: var(--i2-fw-regular);
  line-height: var(--i2-lh-normal);
  color: var(--i2-on-bg);
  background-color: var(--i2-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, color-mix(in srgb, var(--i2-primary) 12%, transparent), transparent),
    linear-gradient(180deg, var(--i2-bg) 0%, var(--i2-bg-muted) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background-color var(--i2-duration) var(--i2-ease-out),
    color var(--i2-duration) var(--i2-ease-out);
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--i2-link);
  text-decoration: none;
  transition: color var(--i2-duration-fast) var(--i2-ease-out);
}

a:hover {
  color: var(--i2-link-hover);
}

h1, h2, h3, h4, h5, h6,
.i2-display {
  font-family: var(--i2-font-display);
  font-weight: var(--i2-fw-bold);
  line-height: var(--i2-lh-tight);
  letter-spacing: var(--i2-tracking-tight);
  color: var(--i2-on-surface);
  margin-top: 0;
}

p {
  margin-top: 0;
  color: var(--i2-on-bg-muted);
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--i2-focus-ring);
}

::selection {
  background: color-mix(in srgb, var(--i2-primary) 30%, transparent);
  color: var(--i2-on-bg);
}

/* Bootstrap overrides — keep utilities, restyle surfaces */
.container,
.container-fluid,
.container-lg,
.container-xl,
.container-xxl {
  --bs-gutter-x: var(--i2-gutter);
}

.row {
  --bs-gutter-x: 1.5rem;
}

/* -------------------------------------------------------------------------- */
/* Accessibility                                                              */
/* -------------------------------------------------------------------------- */
.i2-skip-link {
  position: absolute;
  top: -100%;
  left: var(--i2-gutter);
  z-index: var(--i2-z-skip);
  padding: 0.75rem 1.25rem;
  background: var(--i2-primary);
  color: var(--i2-on-primary);
  font-weight: var(--i2-fw-semibold);
  border-radius: var(--i2-shape-sm);
  transition: top var(--i2-duration-fast);
}

.i2-skip-link:focus {
  top: 0.75rem;
  color: var(--i2-on-primary);
  box-shadow: var(--i2-focus-ring);
}

.i2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .i2-service-box,
  [data-parallax-tilt] {
    transform: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Layout helpers                                                             */
/* -------------------------------------------------------------------------- */
.i2-container {
  width: min(100% - (var(--i2-gutter) * 2), var(--i2-container));
  margin-inline: auto;
}

.i2-container--wide {
  width: min(100% - (var(--i2-gutter) * 2), var(--i2-container-wide));
}

.i2-section {
  padding-block: var(--i2-section-y);
  position: relative;
}

.i2-section__header {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.i2-section__header--center {
  margin-inline: auto;
  text-align: center;
}

.i2-section__eyebrow {
  display: inline-block;
  font-family: var(--i2-font-display);
  font-size: var(--i2-fs-sm);
  font-weight: var(--i2-fw-semibold);
  letter-spacing: var(--i2-tracking-wide);
  text-transform: uppercase;
  color: var(--i2-primary);
  margin-bottom: 0.75rem;
}

.i2-section__title {
  font-size: var(--i2-fs-3xl);
  margin-bottom: 0.75rem;
}

.i2-section__lead {
  font-size: var(--i2-fs-md);
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */
.i2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.625rem 1.5rem;
  font-family: var(--i2-font-display);
  font-size: var(--i2-fs-sm);
  font-weight: var(--i2-fw-semibold);
  letter-spacing: 0.02em;
  border-radius: var(--i2-shape-sm);
  border: 1.5px solid transparent;
  transition:
    background var(--i2-duration) var(--i2-ease-out),
    color var(--i2-duration) var(--i2-ease-out),
    border-color var(--i2-duration) var(--i2-ease-out),
    transform var(--i2-duration) var(--i2-ease-out),
    box-shadow var(--i2-duration) var(--i2-ease-out);
}

.i2-btn:hover {
  transform: translateY(-2px);
}

.i2-btn:active {
  transform: translateY(0);
}

.i2-btn--primary {
  background: var(--i2-gradient);
  color: var(--i2-on-primary);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--i2-primary) 35%, transparent);
}

.i2-btn--primary:hover {
  color: var(--i2-on-primary);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--i2-primary) 45%, transparent);
  filter: brightness(1.05);
}

.i2-btn--outline {
  background: transparent;
  border-color: color-mix(in srgb, #fff 55%, transparent);
  color: #fff;
}

.i2-btn--outline:hover {
  background: color-mix(in srgb, #fff 12%, transparent);
  color: #fff;
  border-color: #fff;
}

.i2-btn--ghost {
  background: transparent;
  color: var(--i2-on-bg);
  border-color: var(--i2-border);
}

.i2-btn--ghost:hover {
  background: var(--i2-state-hover);
  border-color: var(--i2-border-strong);
  color: var(--i2-on-bg);
}

.i2-btn--sm {
  min-height: 2.25rem;
  padding: 0.375rem 1rem;
  font-size: var(--i2-fs-xs);
}

.i2-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* -------------------------------------------------------------------------- */
/* Sticky header                                                              */
/* -------------------------------------------------------------------------- */
.i2-header {
  position: sticky;
  top: 0;
  z-index: var(--i2-z-sticky);
  height: var(--i2-header-h);
  background: var(--i2-header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    background var(--i2-duration) var(--i2-ease-out),
    border-color var(--i2-duration) var(--i2-ease-out),
    box-shadow var(--i2-duration) var(--i2-ease-out);
}

.i2-header.is-scrolled {
  border-bottom-color: var(--i2-header-border);
  box-shadow: var(--i2-elevation-1);
}

.i2-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  width: min(100% - (var(--i2-gutter) * 2), var(--i2-container-wide));
  margin-inline: auto;
}

.i2-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--i2-on-bg);
}

.i2-logo img,
.i2-logo svg,
.i2-logo__img {
  height: 2.5rem;
  width: auto;
}

.i2-logo__img--dark {
  display: none;
}

[data-theme="dark"] .i2-logo__img--light {
  display: none;
}

[data-theme="dark"] .i2-logo__img--dark {
  display: block;
}

.i2-logo:hover {
  color: var(--i2-on-bg);
}

.i2-mega--compact {
  width: min(16rem, calc(100vw - 2rem));
  left: 0;
  transform: translateX(0) translateY(8px);
  padding: 0.75rem;
}

.i2-nav__item:has(> .i2-mega--compact) {
  position: relative;
}

.i2-nav__item.is-open > .i2-mega--compact,
.i2-nav__item:hover > .i2-mega--compact,
.i2-nav__item:focus-within > .i2-mega--compact {
  transform: translateX(0) translateY(0);
}

.i2-btn--outline-light {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  background: transparent;
}

.i2-btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.i2-header__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.i2-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--i2-shape-sm);
  color: var(--i2-on-bg);
  transition: background var(--i2-duration-fast) var(--i2-ease-out);
}

.i2-icon-btn:hover {
  background: var(--i2-state-hover);
  color: var(--i2-primary);
}

.i2-icon-btn[aria-expanded="true"] {
  background: var(--i2-state-focus);
  color: var(--i2-primary);
}

/* Theme toggle — show sun in dark, moon in light */
.i2-theme-toggle .i2-icon--sun { display: none; }
.i2-theme-toggle .i2-icon--moon { display: inline-block; }

[data-theme="dark"] .i2-theme-toggle .i2-icon--sun { display: inline-block; }
[data-theme="dark"] .i2-theme-toggle .i2-icon--moon { display: none; }

/* -------------------------------------------------------------------------- */
/* Desktop mega menu                                                          */
/* -------------------------------------------------------------------------- */
.i2-nav {
  display: none;
  align-items: center;
  gap: 0.15rem;
}

@media (min-width: 992px) {
  .i2-nav {
    display: flex;
  }

  .i2-nav-toggle {
    display: none;
  }
}

.i2-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  font-family: var(--i2-font-display);
  font-size: var(--i2-fs-sm);
  font-weight: var(--i2-fw-medium);
  color: var(--i2-on-bg);
  border-radius: var(--i2-shape-sm);
  transition:
    background var(--i2-duration-fast) var(--i2-ease-out),
    color var(--i2-duration-fast) var(--i2-ease-out);
}

.i2-nav__link:hover,
.i2-nav__item.is-open > .i2-nav__link,
.i2-nav__link[aria-current="page"] {
  background: var(--i2-state-hover);
  color: var(--i2-primary);
}

.i2-nav__item {
  position: relative;
}

.i2-nav__item--mega {
  position: static;
}

.i2-mega {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(56rem, calc(100vw - 2rem));
  padding: 1.75rem;
  background: var(--i2-mega-bg);
  border: 1px solid var(--i2-border);
  border-radius: var(--i2-shape-lg);
  box-shadow: var(--i2-elevation-4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--i2-duration) var(--i2-ease-out),
    transform var(--i2-duration) var(--i2-ease-out),
    visibility var(--i2-duration);
  z-index: var(--i2-z-dropdown);
}

.i2-nav__item.is-open > .i2-mega,
.i2-nav__item:hover > .i2-mega,
.i2-nav__item:focus-within > .i2-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.i2-mega__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.i2-mega__col-title {
  font-family: var(--i2-font-display);
  font-size: var(--i2-fs-xs);
  font-weight: var(--i2-fw-semibold);
  letter-spacing: var(--i2-tracking-wide);
  text-transform: uppercase;
  color: var(--i2-on-bg-subtle);
  margin-bottom: 0.75rem;
}

.i2-mega__link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  margin-inline: -0.75rem;
  border-radius: var(--i2-shape-sm);
  color: var(--i2-on-bg);
  transition: background var(--i2-duration-fast) var(--i2-ease-out);
}

.i2-mega__link:hover {
  background: var(--i2-state-hover);
  color: var(--i2-on-bg);
}

.i2-mega__link .i2-icon {
  margin-top: 0.15rem;
  color: var(--i2-primary);
}

.i2-mega__link-title {
  display: block;
  font-family: var(--i2-font-display);
  font-weight: var(--i2-fw-semibold);
  font-size: var(--i2-fs-sm);
  margin-bottom: 0.15rem;
}

.i2-mega__link-desc {
  display: block;
  font-size: var(--i2-fs-xs);
  color: var(--i2-on-bg-muted);
  line-height: var(--i2-lh-snug);
}

.i2-mega__cta {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--i2-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* -------------------------------------------------------------------------- */
/* Mobile offcanvas                                                           */
/* -------------------------------------------------------------------------- */
.i2-nav-toggle {
  display: inline-flex;
}

.i2-offcanvas {
  position: fixed;
  inset: 0;
  z-index: var(--i2-z-offcanvas);
  pointer-events: none;
}

.i2-offcanvas.is-open {
  pointer-events: auto;
}

.i2-offcanvas__backdrop {
  position: absolute;
  inset: 0;
  background: var(--i2-overlay);
  opacity: 0;
  transition: opacity var(--i2-duration) var(--i2-ease-out);
}

.i2-offcanvas.is-open .i2-offcanvas__backdrop {
  opacity: 1;
}

.i2-offcanvas__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(22rem, 92vw);
  height: 100%;
  background: var(--i2-surface);
  border-inline-start: 1px solid var(--i2-border);
  box-shadow: var(--i2-elevation-5);
  padding: 1.25rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--i2-duration-slow) var(--i2-ease-out);
}

[dir="rtl"] .i2-offcanvas__panel {
  right: auto;
  left: 0;
  transform: translateX(-100%);
  border-inline-start: none;
  border-inline-end: 1px solid var(--i2-border);
}

.i2-offcanvas.is-open .i2-offcanvas__panel {
  transform: translateX(0);
}

.i2-offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.i2-offcanvas__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.i2-offcanvas__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem;
  font-family: var(--i2-font-display);
  font-weight: var(--i2-fw-medium);
  color: var(--i2-on-bg);
  border-radius: var(--i2-shape-sm);
}

.i2-offcanvas__link:hover {
  background: var(--i2-state-hover);
  color: var(--i2-primary);
}

.i2-offcanvas__group {
  margin-block: 0.5rem;
  padding-block: 0.5rem;
  border-block: 1px solid var(--i2-divider);
}

.i2-offcanvas__group-title {
  font-size: var(--i2-fs-xs);
  font-weight: var(--i2-fw-semibold);
  letter-spacing: var(--i2-tracking-wide);
  text-transform: uppercase;
  color: var(--i2-on-bg-subtle);
  padding: 0.5rem 0.75rem;
}

/* -------------------------------------------------------------------------- */
/* Language / preset switchers                                                */
/* -------------------------------------------------------------------------- */
.i2-dropdown {
  position: relative;
}

.i2-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 10rem;
  padding: 0.4rem;
  background: var(--i2-mega-bg);
  border: 1px solid var(--i2-border);
  border-radius: var(--i2-shape-md);
  box-shadow: var(--i2-elevation-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--i2-duration-fast) var(--i2-ease-out),
    transform var(--i2-duration-fast) var(--i2-ease-out),
    visibility var(--i2-duration-fast);
  z-index: var(--i2-z-dropdown);
}

[dir="rtl"] .i2-dropdown__menu {
  right: auto;
  left: 0;
}

.i2-dropdown.is-open .i2-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.i2-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: var(--i2-fs-sm);
  font-weight: var(--i2-fw-medium);
  color: var(--i2-on-bg);
  border-radius: var(--i2-shape-xs);
  text-align: start;
}

.i2-dropdown__item:hover,
.i2-dropdown__item[aria-selected="true"] {
  background: var(--i2-state-hover);
  color: var(--i2-primary);
}

/* Color preset switcher */
.i2-preset-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem;
}

.i2-preset-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition:
    transform var(--i2-duration-fast) var(--i2-ease-out),
    border-color var(--i2-duration-fast) var(--i2-ease-out);
}

.i2-preset-swatch:hover {
  transform: scale(1.12);
}

.i2-preset-swatch[aria-pressed="true"] {
  border-color: var(--i2-on-bg);
  box-shadow: var(--i2-elevation-1);
}

.i2-preset-swatch[data-preset="blue"] { background: linear-gradient(135deg, #007bff, #00b4ff); }
.i2-preset-swatch[data-preset="teal"] { background: linear-gradient(135deg, #0d9488, #2dd4bf); }
.i2-preset-swatch[data-preset="indigo"] { background: linear-gradient(135deg, #4338ca, #818cf8); }
.i2-preset-swatch[data-preset="emerald"] { background: linear-gradient(135deg, #059669, #34d399); }

.i2-preset-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  background: var(--i2-surface);
  border: 1px solid var(--i2-border);
  border-radius: var(--i2-shape-full);
}

.i2-preset-bar__label {
  font-size: var(--i2-fs-xs);
  font-weight: var(--i2-fw-medium);
  color: var(--i2-on-bg-subtle);
  padding-inline: 0.35rem;
}

/* -------------------------------------------------------------------------- */
/* Hero — full-bleed                                                          */
/* -------------------------------------------------------------------------- */
.i2-hero {
  position: relative;
  min-height: min(100vh, 52rem);
  min-height: min(100dvh, 52rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.i2-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--i2-brand-navy);
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(0, 123, 255, 0.45), transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 75%, rgba(0, 180, 255, 0.35), transparent 50%),
    linear-gradient(145deg, #001233 0%, #002a5c 42%, #007bff 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Inner page hero (compact) */
.i2-page-hero {
  position: relative;
  padding-block: calc(var(--i2-header-h) + 3rem) 3.5rem;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.i2-page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 80% at 90% 10%, rgba(0, 180, 255, 0.3), transparent 55%),
    linear-gradient(135deg, #001233 0%, #003366 50%, #007bff 100%);
}

.i2-page-hero__content {
  position: relative;
  z-index: 1;
  width: min(100% - (var(--i2-gutter) * 2), var(--i2-container));
  margin-inline: auto;
}

.i2-page-hero__title {
  font-family: var(--i2-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  color: #fff;
}

.i2-page-hero__lead {
  max-width: 36rem;
  font-size: var(--i2-fs-md);
  color: color-mix(in srgb, #fff 78%, transparent);
  margin-bottom: 0;
}

.i2-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  font-size: var(--i2-fs-sm);
}

.i2-breadcrumb a {
  color: color-mix(in srgb, #fff 70%, transparent);
}

.i2-breadcrumb a:hover {
  color: #fff;
}

.i2-breadcrumb__sep {
  color: color-mix(in srgb, #fff 40%, transparent);
}

.i2-breadcrumb [aria-current="page"] {
  color: #fff;
}

/* Blog grid & form extras */
.i2-blog-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .i2-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .i2-blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.i2-blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--i2-border);
  border-radius: var(--i2-shape-md);
  overflow: hidden;
  background: var(--i2-surface);
  color: inherit;
  transition: border-color var(--i2-duration), transform var(--i2-duration), box-shadow var(--i2-duration);
}

.i2-blog-card:hover {
  border-color: color-mix(in srgb, var(--i2-primary) 40%, var(--i2-border));
  transform: translateY(-3px);
  box-shadow: var(--i2-elevation-2);
  color: inherit;
}

.i2-blog-card__img {
  aspect-ratio: 16 / 10;
  background: var(--i2-gradient-soft);
  object-fit: cover;
  width: 100%;
}

.i2-blog-card__body {
  padding: 1.25rem 1.35rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.i2-blog-card__meta {
  font-size: var(--i2-fs-xs);
  color: var(--i2-on-bg-muted);
  margin-bottom: 0.5rem;
}

.i2-blog-card__title {
  font-size: var(--i2-fs-lg);
  margin-bottom: 0.5rem;
}

.i2-form .form-control,
.i2-form .form-select {
  background: var(--i2-surface);
  border-color: var(--i2-border);
  color: var(--i2-on-bg);
  border-radius: var(--i2-shape-sm);
  padding: 0.75rem 1rem;
}

.i2-form .form-control:focus,
.i2-form .form-select:focus {
  border-color: var(--i2-primary);
  box-shadow: var(--i2-focus-ring);
  background: var(--i2-surface);
  color: var(--i2-on-bg);
}

.i2-form label {
  font-family: var(--i2-font-display);
  font-weight: var(--i2-fw-medium);
  font-size: var(--i2-fs-sm);
  margin-bottom: 0.35rem;
  color: var(--i2-on-bg);
}

.i2-faq .accordion-item {
  background: var(--i2-surface);
  border: 1px solid var(--i2-border);
  border-radius: var(--i2-shape-sm) !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.i2-faq .accordion-button {
  font-family: var(--i2-font-display);
  font-weight: var(--i2-fw-semibold);
  background: var(--i2-surface);
  color: var(--i2-on-bg);
  box-shadow: none;
}

.i2-faq .accordion-button:not(.collapsed) {
  background: color-mix(in srgb, var(--i2-primary) 8%, var(--i2-surface));
  color: var(--i2-primary);
}

.i2-faq .accordion-body {
  color: var(--i2-on-bg-muted);
}

.i2-prose {
  max-width: 42rem;
}

.i2-prose h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.i2-prose p {
  margin-bottom: 1rem;
}

.i2-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.i2-feature-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--i2-divider);
  color: var(--i2-on-bg);
}

.i2-feature-list .i2-icon {
  color: var(--i2-primary);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.i2-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 70% 60%, color-mix(in srgb, var(--i2-primary) 25%, transparent), transparent),
    linear-gradient(180deg, transparent 60%, rgba(0, 12, 31, 0.55) 100%);
  pointer-events: none;
}

#particles-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.i2-hero__content {
  position: relative;
  z-index: 2;
  width: min(100% - (var(--i2-gutter) * 2), var(--i2-container));
  margin-inline: auto;
  padding-block: calc(var(--i2-header-h) + 2rem) 4rem;
}

.i2-hero__brand {
  font-family: var(--i2-font-display);
  font-size: var(--i2-fs-hero);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #ffffff 30%, #a8d4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for browsers without clip */
  -webkit-text-fill-color: transparent;
}

@supports not (background-clip: text) {
  .i2-hero__brand {
    color: #fff;
    -webkit-text-fill-color: unset;
  }
}

.i2-hero__tagline {
  font-family: var(--i2-font-display);
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  font-weight: var(--i2-fw-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 80%, var(--i2-secondary));
  margin-bottom: 1.5rem;
}

.i2-hero__headline {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: var(--i2-fw-semibold);
  max-width: 32rem;
  margin-bottom: 0.75rem;
  color: #fff;
  letter-spacing: -0.01em;
}

.i2-hero__text {
  font-size: var(--i2-fs-md);
  max-width: 28rem;
  margin-bottom: 2rem;
  color: color-mix(in srgb, #fff 78%, transparent);
  line-height: var(--i2-lh-normal);
}

.i2-hero .i2-btn-group {
  margin-bottom: 0;
}

/* Hero entrance states (GSAP sets inline; CSS fallback) */
.i2-hero [data-hero-anim] {
  opacity: 0;
  transform: translateY(24px);
}

html.i2-motion-ready .i2-hero [data-hero-anim] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .i2-hero [data-hero-anim] {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Services — flat boxes + 3D parallax tilt                                   */
/* -------------------------------------------------------------------------- */
.i2-services {
  background: var(--i2-bg);
}

.i2-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 576px) {
  .i2-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .i2-services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.i2-service-box {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  perspective: 800px;
  transform-style: preserve-3d;
}

.i2-service-box__inner {
  height: 100%;
  padding: 1.75rem 1.5rem;
  background: var(--i2-surface);
  border: 1px solid var(--i2-border);
  border-radius: var(--i2-shape-md);
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
  transition:
    transform 0.2s var(--i2-ease-out),
    border-color var(--i2-duration) var(--i2-ease-out),
    box-shadow var(--i2-duration) var(--i2-ease-out),
    background var(--i2-duration) var(--i2-ease-out);
  will-change: transform;
}

.i2-service-box:hover .i2-service-box__inner,
.i2-service-box:focus-within .i2-service-box__inner {
  border-color: color-mix(in srgb, var(--i2-primary) 45%, var(--i2-border));
  box-shadow: var(--i2-elevation-2);
  background: linear-gradient(
    160deg,
    var(--i2-surface) 0%,
    color-mix(in srgb, var(--i2-primary) 4%, var(--i2-surface)) 100%
  );
}

.i2-service-box__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.15rem;
  color: var(--i2-primary);
  background: var(--i2-gradient-soft);
  border-radius: var(--i2-shape-sm);
  transform: translateZ(28px);
  transition: transform var(--i2-duration) var(--i2-ease-out);
}

.i2-service-box:hover .i2-service-box__icon {
  transform: translateZ(40px) scale(1.06);
}

.i2-service-box__title {
  font-size: var(--i2-fs-lg);
  margin-bottom: 0.5rem;
  transform: translateZ(20px);
}

.i2-service-box__text {
  font-size: var(--i2-fs-sm);
  margin-bottom: 1rem;
  transform: translateZ(12px);
}

.i2-service-box__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--i2-font-display);
  font-size: var(--i2-fs-sm);
  font-weight: var(--i2-fw-semibold);
  color: var(--i2-primary);
  transform: translateZ(16px);
}

.i2-service-box__link .i2-icon {
  transition: transform var(--i2-duration) var(--i2-ease-out);
}

.i2-service-box__link:hover .i2-icon {
  transform: translateX(4px);
}

[dir="rtl"] .i2-service-box__link:hover .i2-icon {
  transform: translateX(-4px);
}

/* -------------------------------------------------------------------------- */
/* Scroll reveal                                                              */
/* -------------------------------------------------------------------------- */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--i2-duration-slow) var(--i2-ease-out),
    transform var(--i2-duration-slow) var(--i2-ease-out);
}

[data-animate].is-visible,
[data-animate="fade"].is-visible {
  opacity: 1;
  transform: none;
}

[data-animate="fade-up"] {
  transform: translateY(36px);
}

[data-animate="fade-left"] {
  transform: translateX(-32px);
}

[data-animate="fade-right"] {
  transform: translateX(32px);
}

[data-animate="scale"] {
  transform: scale(0.94);
}

[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Swiper overrides                                                           */
/* -------------------------------------------------------------------------- */
.i2-swiper {
  overflow: hidden;
  padding-bottom: 3rem;
}

.i2-swiper .swiper-slide {
  height: auto;
}

.i2-swiper .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--i2-border-strong);
  opacity: 1;
  transition:
    width var(--i2-duration) var(--i2-ease-out),
    background var(--i2-duration) var(--i2-ease-out);
}

.i2-swiper .swiper-pagination-bullet-active {
  width: 1.5rem;
  border-radius: var(--i2-shape-full);
  background: var(--i2-primary);
}

.i2-swiper .swiper-button-prev,
.i2-swiper .swiper-button-next {
  width: 2.75rem;
  height: 2.75rem;
  margin-top: 0;
  top: auto;
  bottom: 0;
  background: var(--i2-surface);
  border: 1px solid var(--i2-border);
  border-radius: var(--i2-shape-sm);
  color: var(--i2-on-bg);
  transition:
    background var(--i2-duration-fast),
    border-color var(--i2-duration-fast),
    color var(--i2-duration-fast);
}

.i2-swiper .swiper-button-prev::after,
.i2-swiper .swiper-button-next::after {
  font-size: 0.85rem;
  font-weight: 700;
}

.i2-swiper .swiper-button-prev:hover,
.i2-swiper .swiper-button-next:hover {
  background: var(--i2-primary);
  border-color: var(--i2-primary);
  color: var(--i2-on-primary);
}

.i2-swiper .swiper-button-prev { left: 0; }
.i2-swiper .swiper-button-next { right: 0; }

/* Testimonial slide */
.i2-testimonial {
  padding: 1.75rem;
  background: var(--i2-surface);
  border: 1px solid var(--i2-border);
  border-radius: var(--i2-shape-md);
  height: 100%;
}

.i2-testimonial__quote {
  font-size: var(--i2-fs-md);
  color: var(--i2-on-bg);
  margin-bottom: 1.25rem;
  line-height: var(--i2-lh-normal);
}

.i2-testimonial__quote .i2-icon--quote {
  color: var(--i2-primary);
  margin-bottom: 0.75rem;
  opacity: 0.7;
}

.i2-testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.i2-testimonial__avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--i2-gradient-soft);
}

.i2-testimonial__name {
  font-family: var(--i2-font-display);
  font-weight: var(--i2-fw-semibold);
  font-size: var(--i2-fs-sm);
  color: var(--i2-on-bg);
}

.i2-testimonial__role {
  font-size: var(--i2-fs-xs);
  color: var(--i2-on-bg-muted);
}

.i2-testimonial__stars {
  display: flex;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
  color: var(--i2-primary);
}

/* Template slide */
.i2-template-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--i2-shape-md);
  border: 1px solid var(--i2-border);
  background: var(--i2-surface);
  transition:
    border-color var(--i2-duration) var(--i2-ease-out),
    transform var(--i2-duration) var(--i2-ease-out),
    box-shadow var(--i2-duration) var(--i2-ease-out);
}

.i2-template-card:hover {
  border-color: color-mix(in srgb, var(--i2-primary) 40%, var(--i2-border));
  transform: translateY(-4px);
  box-shadow: var(--i2-elevation-3);
  color: inherit;
}

.i2-template-card__img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  background: var(--i2-bg-muted);
  transition: transform var(--i2-duration-slow) var(--i2-ease-out);
}

.i2-template-card:hover .i2-template-card__img {
  transform: scale(1.04);
}

.i2-template-card__meta {
  padding: 1rem 1.15rem;
}

.i2-template-card__title {
  font-family: var(--i2-font-display);
  font-size: var(--i2-fs-sm);
  font-weight: var(--i2-fw-semibold);
  color: var(--i2-on-bg);
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* Pricing (flat, not heavy cards)                                            */
/* -------------------------------------------------------------------------- */
.i2-pricing__grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .i2-pricing__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

.i2-price-plan {
  padding: 2rem 1.5rem;
  border: 1px solid var(--i2-border);
  border-radius: var(--i2-shape-md);
  background: var(--i2-surface);
  transition:
    border-color var(--i2-duration) var(--i2-ease-out),
    transform var(--i2-duration) var(--i2-ease-out);
}

.i2-price-plan:hover {
  border-color: color-mix(in srgb, var(--i2-primary) 35%, var(--i2-border));
  transform: translateY(-3px);
}

.i2-price-plan--featured {
  border-color: var(--i2-primary);
  background:
    linear-gradient(var(--i2-surface), var(--i2-surface)) padding-box,
    var(--i2-gradient) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--i2-elevation-2);
}

.i2-price-plan__name {
  font-size: var(--i2-fs-lg);
  margin-bottom: 0.35rem;
}

.i2-price-plan__amount {
  font-family: var(--i2-font-display);
  font-size: var(--i2-fs-3xl);
  font-weight: var(--i2-fw-bold);
  color: var(--i2-on-bg);
  margin-bottom: 0.25rem;
}

.i2-price-plan__amount span {
  font-size: var(--i2-fs-sm);
  font-weight: var(--i2-fw-medium);
  color: var(--i2-on-bg-muted);
}

.i2-price-plan__list {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.i2-price-plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--i2-fs-sm);
  color: var(--i2-on-bg-muted);
}

.i2-price-plan__list .i2-icon--check {
  color: var(--i2-primary);
  margin-top: 0.15rem;
}

/* -------------------------------------------------------------------------- */
/* Map embed                                                                  */
/* -------------------------------------------------------------------------- */
.i2-map {
  position: relative;
  border-radius: var(--i2-shape-lg);
  overflow: hidden;
  border: 1px solid var(--i2-border);
  background: var(--i2-bg-muted);
  aspect-ratio: 16 / 9;
  min-height: 16rem;
}

.i2-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.15) contrast(1.05);
}

[data-theme="dark"] .i2-map iframe {
  filter: grayscale(0.3) brightness(0.85) contrast(1.1);
}

.i2-map__label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: var(--i2-surface);
  border: 1px solid var(--i2-border);
  border-radius: var(--i2-shape-sm);
  font-size: var(--i2-fs-xs);
  font-weight: var(--i2-fw-semibold);
  color: var(--i2-on-bg);
  box-shadow: var(--i2-elevation-2);
  pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* Contact strip                                                              */
/* -------------------------------------------------------------------------- */
.i2-contact-strip {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .i2-contact-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

.i2-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.25rem 0;
}

.i2-contact-item__icon {
  color: var(--i2-primary);
  flex-shrink: 0;
}

.i2-contact-item__label {
  font-size: var(--i2-fs-xs);
  font-weight: var(--i2-fw-semibold);
  letter-spacing: var(--i2-tracking-wide);
  text-transform: uppercase;
  color: var(--i2-on-bg-subtle);
  margin-bottom: 0.25rem;
}

.i2-contact-item__value {
  font-size: var(--i2-fs-sm);
  color: var(--i2-on-bg);
  font-weight: var(--i2-fw-medium);
}

.i2-contact-item a.i2-contact-item__value:hover {
  color: var(--i2-primary);
}

/* -------------------------------------------------------------------------- */
/* CTA band                                                                   */
/* -------------------------------------------------------------------------- */
.i2-cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--i2-brand-navy);
  color: #fff;
}

.i2-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--i2-gradient);
  opacity: 0.25;
  pointer-events: none;
}

.i2-cta-band::after {
  content: "";
  position: absolute;
  width: 40rem;
  height: 40rem;
  right: -10rem;
  top: -15rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--i2-secondary) 40%, transparent), transparent 70%);
  pointer-events: none;
}

.i2-cta-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .i2-cta-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.i2-cta-band__title {
  color: #fff;
  font-size: var(--i2-fs-2xl);
  margin-bottom: 0.5rem;
}

.i2-cta-band__text {
  color: color-mix(in srgb, #fff 75%, transparent);
  margin: 0;
  max-width: 28rem;
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */
.i2-footer {
  background: var(--i2-bg-inverse);
  color: var(--i2-on-inverse);
  padding-block: 3.5rem 1.5rem;
}

.i2-footer a {
  color: color-mix(in srgb, var(--i2-on-inverse) 75%, transparent);
}

.i2-footer a:hover {
  color: var(--i2-secondary);
}

.i2-footer__grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 576px) {
  .i2-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .i2-footer__grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}

.i2-footer__brand-text {
  margin-top: 1rem;
  font-size: var(--i2-fs-sm);
  color: color-mix(in srgb, var(--i2-on-inverse) 65%, transparent);
  max-width: 18rem;
}

.i2-footer__title {
  font-family: var(--i2-font-display);
  font-size: var(--i2-fs-sm);
  font-weight: var(--i2-fw-semibold);
  color: #fff;
  margin-bottom: 1rem;
}

.i2-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.i2-footer__links a {
  font-size: var(--i2-fs-sm);
  transition: transform var(--i2-duration-fast) var(--i2-ease-out), color var(--i2-duration-fast);
}

.i2-footer__links a:hover {
  transform: translateX(3px);
}

[dir="rtl"] .i2-footer__links a:hover {
  transform: translateX(-3px);
}

.i2-footer__social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.i2-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: var(--i2-shape-sm);
  color: #fff;
  transition:
    background var(--i2-duration-fast),
    border-color var(--i2-duration-fast),
    transform var(--i2-duration-fast);
}

.i2-footer__social a:hover {
  background: var(--i2-primary);
  border-color: var(--i2-primary);
  transform: translateY(-2px);
  color: #fff;
}

.i2-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, #fff 12%, transparent);
  font-size: var(--i2-fs-xs);
  color: color-mix(in srgb, var(--i2-on-inverse) 55%, transparent);
}

.i2-footer .i2-logo img,
.i2-footer .i2-logo svg {
  filter: brightness(0) invert(1);
  height: 2.25rem;
}

/* -------------------------------------------------------------------------- */
/* Unique hover animations                                                    */
/* -------------------------------------------------------------------------- */
@keyframes i2-shine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.i2-link-shine {
  position: relative;
  background: linear-gradient(
    90deg,
    var(--i2-primary) 0%,
    var(--i2-secondary) 40%,
    var(--i2-primary) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.i2-link-shine:hover {
  animation: i2-shine 1.2s linear;
}

.i2-hover-lift {
  transition: transform var(--i2-duration) var(--i2-ease-out);
}

.i2-hover-lift:hover {
  transform: translateY(-4px);
}

.i2-hover-underline {
  position: relative;
}

.i2-hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--i2-gradient);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--i2-duration) var(--i2-ease-out);
}

.i2-hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

[dir="rtl"] .i2-hover-underline::after {
  transform-origin: left;
}

[dir="rtl"] .i2-hover-underline:hover::after {
  transform-origin: right;
}

/* -------------------------------------------------------------------------- */
/* Form controls                                                              */
/* -------------------------------------------------------------------------- */
.i2-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  background: var(--i2-surface);
  border: 1px solid var(--i2-border);
  border-radius: var(--i2-shape-sm);
  color: var(--i2-on-bg);
  transition:
    border-color var(--i2-duration-fast),
    box-shadow var(--i2-duration-fast);
}

.i2-input:hover {
  border-color: var(--i2-border-strong);
}

.i2-input:focus {
  border-color: var(--i2-primary);
  box-shadow: var(--i2-focus-ring);
  outline: none;
}

.i2-input::placeholder {
  color: var(--i2-on-bg-subtle);
}

.i2-label {
  display: block;
  font-size: var(--i2-fs-sm);
  font-weight: var(--i2-fw-medium);
  margin-bottom: 0.4rem;
  color: var(--i2-on-bg);
}

/* -------------------------------------------------------------------------- */
/* Utilities                                                                  */
/* -------------------------------------------------------------------------- */
.i2-text-gradient {
  background: var(--i2-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.i2-bg-surface { background: var(--i2-surface); }
.i2-bg-muted { background: var(--i2-bg-muted); }

.i2-divider {
  height: 1px;
  background: var(--i2-divider);
  border: 0;
  margin: 0;
}

/* Custom scrollbar */
@media (pointer: fine) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: var(--i2-scrollbar-track);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--i2-scrollbar-thumb);
    border-radius: var(--i2-shape-full);
    border: 2px solid var(--i2-scrollbar-track);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--i2-primary);
  }
}

/* -------------------------------------------------------------------------- */
/* Responsive refinements                                                     */
/* -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .i2-mega {
    display: none;
  }

  .i2-hero {
    min-height: min(100svh, 40rem);
  }

  .i2-header__actions .i2-btn--primary {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .i2-hero__content {
    padding-block: calc(var(--i2-header-h) + 1.25rem) 3rem;
  }

  .i2-btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .i2-btn-group .i2-btn {
    width: 100%;
  }
}

/* Print */
@media print {
  .i2-header,
  .i2-offcanvas,
  #particles-canvas,
  .i2-theme-toggle,
  .i2-preset-bar {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}