/* ==========================================================================
   NIOTECH UI — design tokens, base layer and a self-contained grid.
   The grid implements only the Bootstrap-5 class names the Niotech markup
   uses, so the templates stay copy-compatible without pulling in Bootstrap.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700&display=swap");

:root {
  /* ---- color ---- */
  --theme:      #7444FD;
  --theme-dark: #5B2FE0;
  --title:      #282C32;
  --header:     #282C32;
  --text:       #858585;
  --text2:      #CBCBCB;
  --orange:     #E78C45;
  --white:      #FFFFFF;
  --black:      #000000;
  --body:       #FFFFFF;

  /* ---- backgrounds ---- */
  --bg-1:       #161921;
  --bg-2:       #F6F7FF;
  --theme2:     #F9F3EF;
  --theme3:     #FAF8FF;

  /* ---- borders ---- */
  --border:     #E6E6E6;
  --border-2:   #F1F1F1;
  --border-3:   #D8D8D8;
  --border-4:   #E0E0E0;
  --border-5:   #565656;

  /* ---- state colors (used sparingly, mostly in the admin) ---- */
  --ok:         #16A34A;
  --ok-soft:    #E8F7EE;
  --warn:       #B45309;
  --warn-soft:  #FDF3E3;
  --danger:     #DC2626;
  --danger-soft:#FDECEC;
  --info-soft:  rgba(116, 68, 253, 0.10);

  /* ---- radius ---- */
  --r-pill:     100px;
  --r-cta:      50px;
  --r-counter:  30px;
  --r-card:     20px;
  --r-blog:     15px;
  --r-faq:      10px;
  --r-sm:       6px;

  /* ---- elevation ---- */
  --box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, .06);
  --sh-subtle:  rgba(2, 0, 181, 0.1) 0px 1px 2px 0px;
  --sh-heavy:   rgba(0, 0, 0, 0.3) 0px 4px 30px 0px;
  --sh-arrow:   rgba(52, 55, 170, 0.15) 0px 10px 30px;

  /* ---- rhythm ---- */
  --container:  1320px;
  --gutter:     12px;
  --section-y:  120px;
  --gap:        24px;
  --pad-card:   24px;
  --pad-pricing: 40px;

  /* ---- type ---- */
  --font:       "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-alt:   "Nunito", sans-serif;
}

/* ---- base resets ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: 0.3s ease-in-out; }
a:hover { color: var(--theme); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--title); font-weight: 700; }

h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.2; letter-spacing: -1.28px; margin-bottom: 15px; }
h2 { font-size: clamp(26px, 3.4vw, 35px); letter-spacing: -0.96px; margin-bottom: 25px; line-height: 1.25; }
h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.96px; }
h4 { font-size: 24px; font-weight: 600; line-height: 34px; letter-spacing: -0.48px; }
h5 { font-size: 20px; font-weight: 600; }
h6 { font-size: 16px; font-weight: 600; line-height: 23.2px; }

img, svg { max-width: 100%; height: auto; }
ul, ol { list-style: none; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--theme);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(116, 68, 253, 0.2); color: var(--title); }

/* ---- container / grid ------------------------------------------------ */

.container {
  width: 100%;
  max-width: calc(var(--container) + (var(--gutter) * 2));
  margin: 0 auto;
  padding: 0 20px;
}
.container-narrow { max-width: 900px; }
.container-wide   { max-width: 1560px; }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
}
.row > * { padding-left: var(--gutter); padding-right: var(--gutter); min-width: 0; width: 100%; }

.g-0 { margin: 0; } .g-0 > * { padding: 0; }
.g-2 > * { padding-bottom: 8px; }
.g-3 > * { padding-bottom: 16px; }
.g-4 > * { padding-bottom: 24px; }
.g-5 > * { padding-bottom: 40px; }

.col       { flex: 1 0 0%; }
.col-auto  { width: auto; flex: 0 0 auto; }
.col-12 { width: 100%; } .col-11 { width: 91.6667%; } .col-10 { width: 83.3333%; }
.col-9  { width: 75%; }  .col-8  { width: 66.6667%; } .col-7  { width: 58.3333%; }
.col-6  { width: 50%; }  .col-5  { width: 41.6667%; } .col-4  { width: 33.3333%; }
.col-3  { width: 25%; }  .col-2  { width: 16.6667%; } .col-1  { width: 8.3333%; }

@media (min-width: 576px) {
  .col-sm-12 { width: 100%; } .col-sm-6 { width: 50%; } .col-sm-4 { width: 33.3333%; }
}
@media (min-width: 768px) {
  .col-md-12 { width: 100%; } .col-md-8 { width: 66.6667%; } .col-md-6 { width: 50%; }
  .col-md-5 { width: 41.6667%; } .col-md-4 { width: 33.3333%; } .col-md-3 { width: 25%; }
}
@media (min-width: 992px) {
  .col-lg-12 { width: 100%; } .col-lg-10 { width: 83.3333%; } .col-lg-9 { width: 75%; }
  .col-lg-8 { width: 66.6667%; } .col-lg-7 { width: 58.3333%; } .col-lg-6 { width: 50%; }
  .col-lg-5 { width: 41.6667%; } .col-lg-4 { width: 33.3333%; } .col-lg-3 { width: 25%; }
  .col-lg-2 { width: 16.6667%; }
}
@media (min-width: 1200px) {
  .col-xl-8 { width: 66.6667%; } .col-xl-6 { width: 50%; } .col-xl-4 { width: 33.3333%; }
  .col-xl-3 { width: 25%; }
}

/* ---- utilities (the subset the templates use) ------------------------ */

/* Display utilities carry !important so a component's own `display` (the
   pill buttons are inline-flex) can never beat a responsive d-none. */
.d-flex        { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block       { display: block !important; }
.d-none        { display: none !important; }
.d-grid        { display: grid !important; }
@media (min-width: 992px) {
  .d-lg-none  { display: none !important; }
  .d-lg-flex  { display: flex !important; }
  .d-lg-block { display: block !important; }
}
@media (max-width: 991px) { .d-md-none { display: none !important; } }

.flex-wrap    { flex-wrap: wrap; }
.flex-column  { flex-direction: column; }
.flex-1       { flex: 1; }
.align-items-center   { align-items: center; }
.align-items-start    { align-items: flex-start; }
.align-items-end      { align-items: flex-end; }
.align-items-stretch  { align-items: stretch; }
.justify-content-center  { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end     { justify-content: flex-end; }
.justify-content-start   { justify-content: flex-start; }

.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 16px; }
.gap-4 { gap: 24px; } .gap-5 { gap: 40px; }

.text-center { text-align: center; }
.text-end    { text-align: right; }
.text-start  { text-align: left; }
.text-muted  { color: var(--text); }
.text-theme  { color: var(--theme); }
.text-title  { color: var(--title); }
.text-white  { color: var(--white); }
.text-nowrap { white-space: nowrap; }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.fs-13 { font-size: 13px; } .fs-14 { font-size: 14px; } .fs-15 { font-size: 15px; }
.fs-18 { font-size: 18px; } .fs-20 { font-size: 20px; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ms-auto { margin-left: auto; }
.mt-0 { margin-top: 0; }   .mt-1 { margin-top: 4px; }  .mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; } .mt-5 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .mb-5 { margin-bottom: 40px; }
.py-3 { padding-top: 16px; padding-bottom: 16px; }
.py-4 { padding-top: 24px; padding-bottom: 24px; }
.position-relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.rounded-circle { border-radius: 50%; }

/* ---- section -------------------------------------------------------- */

.section { padding: var(--section-y) 0; }
.section-sm { padding: 80px 0; }
.section.no-top { padding-top: 0; }
.section.no-bottom { padding-bottom: 0; }
.section-tint { background: var(--theme3); }

@media (max-width: 991px) {
  .section { padding: 70px 0; }
  .section-sm { padding: 50px 0; }
}

/* ---- section tag ----------------------------------------------------- */

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  color: var(--theme);
  background: rgba(116, 68, 253, 0.15);
  margin-bottom: 16px;
}
.section-tag svg { width: 16px; height: 16px; }
.section-tag-light { color: var(--white); background: rgba(255, 255, 255, 0.15); }

.section-title { margin-bottom: 48px; }
.section-title.text-center { text-align: center; }
.section-title p { color: var(--text); font-size: 16px; max-width: 565px; }
.section-title.text-center p { margin: 0 auto; }

/* ---- buttons --------------------------------------------------------- */

.theme-btn, .theme-btn-outline, .theme-btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  padding: 17px 32px;
  border-radius: var(--r-pill);
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}
.theme-btn { color: var(--white); background-color: var(--theme); border: 1px solid var(--theme); }
.theme-btn::before, .theme-btn-outline::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 150%;
  height: 200%;
  border-radius: 50%;
  transform: translateX(-50%);
  transition: 0.4s ease-in-out;
  z-index: -1;
}
.theme-btn::before { background: var(--title); }
.theme-btn:hover { color: var(--white); }
.theme-btn:hover::before { top: -96%; }

.theme-btn-outline {
  color: var(--title);
  background: transparent;
  border: 1px solid var(--border-5);
}
.theme-btn-outline::before { background: var(--theme); }
.theme-btn-outline:hover { color: var(--white); border-color: var(--theme); }
.theme-btn-outline:hover::before { top: -96%; }

.theme-btn-white { color: var(--theme); background: var(--white); border: 1px solid var(--white); }
.theme-btn-white:hover { background: var(--title); border-color: var(--title); color: var(--white); }

.btn-sm { padding: 11px 22px; font-size: 14px; }
.btn-xs { padding: 8px 16px; font-size: 13px; }
.btn-block { width: 100%; }
.theme-btn[disabled], .theme-btn-outline[disabled] { opacity: 0.45; pointer-events: none; }

/* ---- step badge ------------------------------------------------------ */

.step-badge {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(116, 68, 253, 0.15);
  color: var(--theme);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---- counter bar ----------------------------------------------------- */

.counter-wrapper {
  background: var(--theme);
  border-radius: var(--r-counter);
  padding: 70px 30px;
  position: relative;
  overflow: hidden;
}
.counter-number { font-size: clamp(34px, 5vw, 48px); font-weight: 700; color: var(--white); margin: 0; }
.counter-label  { font-size: 15px; color: rgba(255, 255, 255, 0.9); margin-top: 6px; }

/* ---- CTA wrapper ----------------------------------------------------- */

.cta-wrapper {
  background: var(--theme);
  border-radius: var(--r-cta);
  padding: 80px 40px;
  position: relative;
  overflow: hidden;
}
.cta-wrapper h2 { color: var(--white); }
.cta-wrapper p  { color: rgba(255, 255, 255, 0.9); }

/* ---- accordion ------------------------------------------------------- */

.accordion-item {
  background: var(--theme3);
  border-radius: var(--r-faq);
  margin-bottom: 12px;
  overflow: hidden;
}
.accordion-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  color: var(--title);
  padding: 20px 24px;
  text-align: left;
}
.accordion-button .accordion-icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--white);
  display: grid; place-items: center;
  transition: 0.3s;
  color: var(--theme);
}
.accordion-item.is-open .accordion-button { color: var(--theme); }
.accordion-item.is-open .accordion-icon { background: var(--theme); color: var(--white); transform: rotate(45deg); }
.accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel > div { overflow: hidden; }
.accordion-body { padding: 0 24px 22px; color: var(--text); font-size: 16px; }

/* ---- social icons ---------------------------------------------------- */

.social-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--text);
  transition: 0.3s;
}
.social-icon:hover { background: var(--theme); border-color: var(--theme); color: var(--white); }

/* ---- back to top ----------------------------------------------------- */

.back-to-top {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--theme);
  color: var(--white);
  display: grid; place-items: center;
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 99;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--title); color: var(--white); }

/* ---- image hover effects --------------------------------------------- */

.img-shine { position: relative; overflow: hidden; }
.img-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.35) 100%);
  transform: skewX(-25deg);
}
.img-shine:hover::after { animation: imgShine 1s ease; }

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes up-down     { 0% { transform: translateY(10px); } 100% { transform: translateY(-10px); } }
@keyframes float-bob-y { 0% { transform: translateY(-24px); } 50% { transform: translateY(-6px); } 100% { transform: translateY(-24px); } }
@keyframes float-bob-x { 0% { transform: translateX(24px); } 50% { transform: translateX(6px); } 100% { transform: translateX(24px); } }
@keyframes spinner     { 100% { transform: rotate(360deg); } }
@keyframes spin2       { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
@keyframes jumpAni     { 0% { transform: translateY(0); } 40% { transform: translateY(-24px); } 100% { transform: translateY(0); } }
@keyframes morph       { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } }
@keyframes imgShine    { 100% { left: 125%; } }
@keyframes ripple      { 0% { transform: scale(1); opacity: 0; } 30% { opacity: 0.35; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes marqueeLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes fadein      { 0% { opacity: 0; } 100% { opacity: 1; } }

.anim-float-y { animation: float-bob-y 3.4s ease-in-out infinite; }
.anim-float-x { animation: float-bob-x 3.4s ease-in-out infinite; }
.anim-up-down { animation: up-down 2.4s ease-in-out infinite alternate; }
.anim-spin    { animation: spinner 14s linear infinite; }
.anim-spin-reverse { animation: spin2 14s linear infinite; }
.anim-bounce  { animation: jumpAni 4.5s ease-in-out infinite; }
.anim-morph   { animation: morph 9s ease-in-out infinite; }

/* ---- scroll reveal (the WOW.js role, done in ~20 lines of JS) --------- */

.js .wow { opacity: 0; }
.js .wow.fadeInUp    { transform: translateY(38px); }
.js .wow.fadeInDown  { transform: translateY(-38px); }
.js .wow.fadeInLeft  { transform: translateX(-38px); }
.js .wow.fadeInRight { transform: translateX(38px); }
.js .wow.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .wow { opacity: 1 !important; transform: none !important; }
  .anim-float-y, .anim-float-x, .anim-up-down, .anim-spin,
  .anim-spin-reverse, .anim-bounce, .anim-morph { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}