/*
Theme Name: NiftyTechs
Theme URI: https://niftytechs.com/
Description: Custom NiftyTechs child theme based on Extendable.
Author: Nifty Techs Group LLC
Author URI: https://niftytechs.com/
Template: extendable
Version: 1.2.0
Text Domain: niftytechs
*/


/* ==========================================================
   NIFTYTECHS DESIGN SYSTEM
   ========================================================== */

:root {
  --nt-navy: #0A093D;
  --nt-navy-soft: #11115A;

  --nt-blue: #0154D4;
  --nt-blue-dark: #003EA8;
  --nt-blue-soft: #F0F5FF;

  --nt-text: #182230;
  --nt-muted: #667085;

  --nt-white: #FFFFFF;

  --nt-light: #F6F8FC;
  --nt-light-2: #F8FAFD;

  --nt-border: #E4E7EC;
  --nt-border-dark: #D0D5DD;

  --nt-radius-sm: 8px;
  --nt-radius-md: 14px;
  --nt-radius-lg: 20px;
  --nt-radius-xl: 24px;

  --nt-shadow-sm:
    0 2px 8px rgba(10, 9, 61, 0.04);

  --nt-shadow-md:
    0 8px 24px rgba(10, 9, 61, 0.08);

  --nt-shadow-lg:
    0 20px 55px rgba(10, 9, 61, 0.10);

  --nt-shadow-blue:
    0 6px 18px rgba(1, 84, 212, 0.18);
}


/* ==========================================================
   GLOBAL
   ========================================================== */

html {
  scroll-behavior: smooth;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;

  color: var(--nt-text);
  background: var(--nt-white);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;

  color: var(--nt-navy);

  line-height: 1.12;
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(2.5rem, 4.3vw, 4.1rem);
  font-weight: 750;
}

h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 720;
}

h3 {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 700;
}

p {
  line-height: 1.7;
}


/* ==========================================================
   LINKS
   ========================================================== */

a {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}


/* ==========================================================
   WORDPRESS BUTTONS
   ========================================================== */

.wp-block-button__link,
.wp-element-button {
  padding: 13px 22px !important;

  border: 0;
  border-radius: 10px !important;

  background: var(--nt-blue);
  color: var(--nt-white);

  font-weight: 650;

  box-shadow:
    0 4px 12px rgba(1, 84, 212, 0.18);

  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  background: var(--nt-blue-dark);
  color: var(--nt-white);

  transform: translateY(-1px);

  box-shadow:
    0 8px 20px rgba(1, 84, 212, 0.22);
}


/* ==========================================================
   GENERIC NIFTYTECHS CARDS
   ========================================================== */

.nt-card {
  padding: clamp(24px, 3vw, 34px);

  background: var(--nt-white);

  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-md);

  box-shadow: var(--nt-shadow-sm);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.nt-card:hover {
  transform: translateY(-2px);

  border-color: rgba(1, 84, 212, 0.20);

  box-shadow: var(--nt-shadow-md);
}


/* ==========================================================
   LIGHT / DARK SECTIONS
   ========================================================== */

.nt-section-light {
  background:
    linear-gradient(
      180deg,
      #F8FAFD 0%,
      #FFFFFF 100%
    );
}

.nt-section-dark {
  background:
    linear-gradient(
      135deg,
      #0A093D 0%,
      #11115A 100%
    );

  color: var(--nt-white);
}

.nt-section-dark h1,
.nt-section-dark h2,
.nt-section-dark h3,
.nt-section-dark h4,
.nt-section-dark h5,
.nt-section-dark h6 {
  color: var(--nt-white);
}

.nt-section-dark p {
  color: rgba(255, 255, 255, 0.80);
}


/* ==========================================================
   NIFTYTECHS HEADER
   ========================================================== */

.nt-site-header {
  position: relative;
  z-index: 1000;

  width: 100%;

  background: var(--nt-white);
  border-bottom: 1px solid #E9EDF3;
}


/* Main row:
   Logo | Navigation | Translator
*/
.nt-site-header > .wp-block-group.alignwide {
  width: min(1440px, calc(100% - 48px)) !important;
  max-width: 1440px !important;

  margin-inline: auto !important;

  display: grid !important;

  grid-template-columns:
    180px
    minmax(0, 1fr)
    150px;

  align-items: center !important;

  gap: 24px !important;

  padding: 14px 0 !important;
}


/* ==========================================================
   LOGO
   ========================================================== */

.nt-site-header .wp-block-site-logo {
  margin: 0 !important;
}

.nt-site-header .wp-block-site-logo img {
  display: block !important;

  width: 175px !important;
  max-width: 175px !important;

  height: auto !important;
}

.nt-site-header
> .wp-block-group.alignwide
> .wp-block-group:first-child {
  min-width: 0 !important;
  justify-self: start !important;
}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.nt-site-header
> .wp-block-group.alignwide
> .wp-block-group:nth-child(2) {
  min-width: 0 !important;

  justify-self: center !important;
}

.nt-site-header .wp-block-navigation {
  margin: 0 !important;

  min-width: 0 !important;

  font-size: 15px !important;
  font-weight: 650 !important;
}

.nt-site-header .wp-block-navigation__container {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  flex-wrap: nowrap !important;

  gap: 21px !important;
}

.nt-site-header .wp-block-navigation-item {
  flex: 0 0 auto !important;
}

.nt-site-header .wp-block-navigation-item__content {
  position: relative;

  padding: 0 !important;

  color: var(--nt-text) !important;

  line-height: 1.2;

  white-space: nowrap !important;

  text-decoration: none !important;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.nt-site-header .wp-block-navigation-item__content:hover {
  color: var(--nt-blue) !important;
}


/* Normal-link hover underline */

@media (min-width: 1101px) {

  .nt-site-header
  .wp-block-navigation__container
  > .wp-block-navigation-item:not(:last-child)
  > .wp-block-navigation-item__content::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    margin-inline: auto;

    border-radius: 2px;

    background: var(--nt-blue);

    transition: width 0.2s ease;
  }

  .nt-site-header
  .wp-block-navigation__container
  > .wp-block-navigation-item:not(:last-child)
  > .wp-block-navigation-item__content:hover::after {
    width: 100%;
  }

}


/* ==========================================================
   PAY INVOICE
   ========================================================== */

.nt-site-header
.wp-block-navigation__container
> .wp-block-navigation-item:last-child {
  margin-left: 3px !important;
}

.nt-site-header
.wp-block-navigation__container
> .wp-block-navigation-item:last-child
> .wp-block-navigation-item__content {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 10px 16px !important;

  background: var(--nt-blue) !important;
  color: var(--nt-white) !important;

  border-radius: 9px !important;

  font-weight: 700 !important;

  white-space: nowrap !important;

  box-shadow: var(--nt-shadow-blue);
}

.nt-site-header
.wp-block-navigation__container
> .wp-block-navigation-item:last-child
> .wp-block-navigation-item__content:hover {
  background: var(--nt-blue-dark) !important;
  color: var(--nt-white) !important;

  transform: translateY(-1px);
}


/* ==========================================================
   GTRANSLATE
   ========================================================== */

.nt-site-header
> .wp-block-group.alignwide
> .wp-block-group:nth-child(3) {
  min-width: 0 !important;

  justify-self: end !important;
}

.nt-site-header .gtranslate_wrapper {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: flex-end !important;

  position: static !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  transform: none !important;
}

.nt-site-header .gt_float_switcher,
.nt-site-header .gt_switcher {
  position: static !important;

  inset: auto !important;

  margin: 0 !important;

  transform: none !important;

  box-shadow: none !important;
}

.nt-site-header .gtranslate_wrapper select,
.nt-site-header .gtranslate_wrapper .gt_selector {
  width: 145px !important;
  min-width: 145px !important;
  max-width: 145px !important;

  height: 34px !important;
  min-height: 34px !important;

  margin: 0 !important;

  padding:
    4px
    27px
    4px
    9px !important;

  background-color: #ffffff !important;

  color: var(--nt-text) !important;

  border: 1px solid #D9DEE7 !important;
  border-radius: 7px !important;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;

  font-size: 14px !important;
  font-weight: 600 !important;

  cursor: pointer !important;

  box-shadow: none !important;
}

.nt-site-header .gtranslate_wrapper select:focus,
.nt-site-header .gtranslate_wrapper .gt_selector:focus {
  border-color: var(--nt-blue) !important;

  outline: none !important;

  box-shadow:
    0 0 0 3px rgba(1, 84, 212, 0.10) !important;
}


/* ==========================================================
   MEDIUM DESKTOP
   ========================================================== */

@media (max-width: 1250px) {

  .nt-site-header > .wp-block-group.alignwide {
    width: calc(100% - 32px) !important;

    grid-template-columns:
      145px
      minmax(0, 1fr)
      125px;

    gap: 14px !important;
  }

  .nt-site-header .wp-block-site-logo img {
    width: 145px !important;
    max-width: 145px !important;
  }

  .nt-site-header .wp-block-navigation {
    font-size: 14px !important;
  }

  .nt-site-header .wp-block-navigation__container {
    gap: 14px !important;
  }

  .nt-site-header
  .wp-block-navigation__container
  > .wp-block-navigation-item:last-child
  > .wp-block-navigation-item__content {
    padding: 9px 13px !important;
  }

  .nt-site-header .gtranslate_wrapper select,
  .nt-site-header .gtranslate_wrapper .gt_selector {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;

    font-size: 13px !important;
  }

}


/* ==========================================================
   TABLET / HAMBURGER
   ========================================================== */

@media (max-width: 1050px) {

  .nt-site-header > .wp-block-group.alignwide {
    grid-template-columns:
      auto
      1fr
      auto;

    gap: 16px !important;
  }

  .nt-site-header .wp-block-site-logo img {
    width: 155px !important;
    max-width: 155px !important;
  }

  .nt-site-header
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  .nt-site-header
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

  .nt-site-header > .wp-block-group.alignwide {
    width: calc(100% - 24px) !important;

    grid-template-columns:
      auto
      auto;

    justify-content: space-between !important;

    gap: 12px !important;

    padding: 11px 0 !important;
  }

  .nt-site-header .wp-block-site-logo img {
    width: 145px !important;
    max-width: 145px !important;
  }

  .nt-site-header
  > .wp-block-group.alignwide
  > .wp-block-group:nth-child(3) {
    grid-column: 1 / -1;

    justify-self: end !important;
  }

  .nt-site-header .gtranslate_wrapper select,
  .nt-site-header .gtranslate_wrapper .gt_selector {
    width: 115px !important;
    min-width: 115px !important;
    max-width: 115px !important;

    height: 32px !important;
    min-height: 32px !important;

    font-size: 12px !important;
  }

}


/* Main header wrapper */
header.wp-block-template-part > .wp-block-group {
  width: min(1600px, calc(100% - 48px));
  max-width: 1600px;

  margin-inline: auto;

  padding-top: 12px;
  padding-bottom: 12px;
}


/* Center all header elements */
header.wp-block-template-part .wp-block-group,
header.wp-block-template-part .wp-block-row {
  align-items: center;
}


/* Desktop: never allow header rows to wrap */
@media (min-width: 1101px) {

  header.wp-block-template-part .wp-block-row {
    flex-wrap: nowrap !important;
  }

}


/* ==========================================================
   LOGO
   ========================================================== */

header .wp-block-site-logo {
  flex: 0 0 auto;
}

header .wp-block-site-logo img {
  display: block;

  width: 195px;
  max-width: 100%;
  height: auto;
}


/* ==========================================================
   NAVIGATION
   ========================================================== */

header .wp-block-navigation {
  margin: 0;

  font-size: 15px;
  font-weight: 650;
}

header .wp-block-navigation__container {
  display: flex;
  align-items: center;

  flex-wrap: nowrap !important;

  gap: 22px;
}

header .wp-block-navigation-item {
  flex: 0 0 auto;
}

header .wp-block-navigation-item__content {
  position: relative;

  color: var(--nt-text);

  line-height: 1.2;

  text-decoration: none;

  white-space: nowrap;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

header .wp-block-navigation-item__content:hover {
  color: var(--nt-blue);
}


/* Subtle hover underline for normal links */
@media (min-width: 1101px) {

  header
  .wp-block-navigation__container
  > .wp-block-navigation-item:not(:last-child)
  > .wp-block-navigation-item__content::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    margin-inline: auto;

    border-radius: 2px;

    background: var(--nt-blue);

    transition: width 0.2s ease;
  }

  header
  .wp-block-navigation__container
  > .wp-block-navigation-item:not(:last-child)
  > .wp-block-navigation-item__content:hover::after {

    width: 100%;
  }

}


/* ==========================================================
   PAY INVOICE CTA
   ========================================================== */

header
.wp-block-navigation__container
> .wp-block-navigation-item:last-child
> .wp-block-navigation-item__content {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;

  border-radius: 9px;

  background: var(--nt-blue);
  color: var(--nt-white) !important;

  font-weight: 700;

  box-shadow: var(--nt-shadow-blue);
}

header
.wp-block-navigation__container
> .wp-block-navigation-item:last-child
> .wp-block-navigation-item__content:hover {

  background: var(--nt-blue-dark);
  color: var(--nt-white) !important;

  transform: translateY(-1px);
}


/* ==========================================================
   GTRANSLATE
   ========================================================== */

/*
   Recommended:
   Floating selector OFF.
   [gtranslate] shortcode inside header.
   Leave GTranslate's Custom CSS box empty.
*/

header .gtranslate_wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 auto;

  position: static !important;

  float: none !important;

  margin: 0 0 0 14px !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  transform: none !important;
}


/* Reset floating layouts */
header .gt_float_switcher,
header .gt_switcher {
  position: static !important;

  inset: auto !important;

  float: none !important;

  margin: 0 !important;

  transform: none !important;

  box-shadow: none !important;
}


/* Dropdown */
header .gtranslate_wrapper select,
header .gtranslate_wrapper .gt_selector {
  width: auto !important;

  min-width: 128px !important;
  max-width: 142px !important;

  height: 34px !important;
  min-height: 34px !important;

  margin: 0 !important;

  padding:
    4px
    27px
    4px
    9px !important;

  background-color: var(--nt-white) !important;

  color: var(--nt-text) !important;

  border: 1px solid #D9DEE7 !important;
  border-radius: 7px !important;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;

  font-size: 14px !important;
  font-weight: 600 !important;

  line-height: 1 !important;

  cursor: pointer !important;

  box-shadow: none !important;

  outline: none !important;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

header .gtranslate_wrapper select:hover,
header .gtranslate_wrapper .gt_selector:hover {
  border-color: #B7C0CE !important;

  background-color: #FAFBFC !important;
}

header .gtranslate_wrapper select:focus,
header .gtranslate_wrapper .gt_selector:focus {
  border-color: var(--nt-blue) !important;

  box-shadow:
    0 0 0 3px rgba(1, 84, 212, 0.10) !important;
}


/* Flag */
header .gtranslate_wrapper img {
  width: 19px !important;
  max-width: 19px !important;
  height: auto !important;

  margin-right: 5px !important;

  border-radius: 1px !important;

  vertical-align: middle !important;
}

header .gtranslate_wrapper a {
  color: var(--nt-text) !important;

  font-size: 14px !important;
  font-weight: 600 !important;

  text-decoration: none !important;
}


/* ==========================================================
   WORDPRESS IMAGES
   ========================================================== */

.wp-block-image img {
  border-radius: 12px;
}


/* ==========================================================
   WORDPRESS CONTENT WIDTH
   ========================================================== */

.wp-block-group.alignwide,
.wp-block-columns.alignwide {
  width: min(1200px, calc(100% - 40px));

  margin-inline: auto;
}


/* ==========================================================
   SOFTWARE PAGE
   ========================================================== */

.nt-software-page {
  --nt-navy: #0A093D;
  --nt-blue: #0154D4;
  --nt-blue-dark: #003EA8;
  --nt-text: #182230;
  --nt-muted: #667085;
  --nt-border: #E4E7EC;
  --nt-white: #FFFFFF;
  --nt-light: #F6F8FC;

  color: var(--nt-text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

.nt-software-page,
.nt-software-page *,
.nt-software-page *::before,
.nt-software-page *::after {
  box-sizing: border-box;
}

.nt-software-container {
  width: min(1200px, calc(100% - 40px));

  margin-inline: auto;
}


/* ==========================================================
   SOFTWARE HERO
   ========================================================== */

.nt-software-hero {
  position: relative;

  overflow: hidden;

  padding:
    clamp(78px, 7.5vw, 110px)
    0;

  background:
    radial-gradient(
      circle at 88% 24%,
      rgba(1, 84, 212, 0.13),
      transparent 31%
    ),
    radial-gradient(
      circle at 8% 5%,
      rgba(10, 9, 61, 0.055),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #FFFFFF 0%,
      #F8FAFD 55%,
      #EFF5FF 100%
    );
}

.nt-software-hero-content {
  max-width: 760px;
}


/* Eyebrow */
.nt-software-eyebrow {
  display: inline-block;

  margin-bottom: 16px;

  color: var(--nt-blue);

  font-size: 0.80rem;
  font-weight: 800;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


/* Hero title */
.nt-software-hero h1 {
  max-width: 740px;

  margin:
    0
    0
    24px;

  color: var(--nt-navy);

  font-size:
    clamp(
      2.8rem,
      4.5vw,
      4.35rem
    );

  font-weight: 770;

  line-height: 1.04;

  letter-spacing: -0.045em;
}


/* Lead copy */
.nt-software-lead {
  max-width: 690px;

  margin: 0;

  color: var(--nt-muted);

  font-size:
    clamp(
      1.04rem,
      1.3vw,
      1.18rem
    );

  line-height: 1.72;
}


/* ==========================================================
   SOFTWARE BUTTONS
   ========================================================== */

.nt-software-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 14px;

  margin-top: 30px;
}

.nt-software-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding: 12px 21px;

  border-radius: 10px;

  font-size: 0.97rem;
  font-weight: 700;

  line-height: 1;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.nt-software-btn:hover {
  transform: translateY(-1px);
}

.nt-software-btn-primary {
  background: var(--nt-blue);

  color: var(--nt-white);

  box-shadow:
    0 6px 18px rgba(1, 84, 212, 0.18);
}

.nt-software-btn-primary:hover {
  background: var(--nt-blue-dark);

  color: var(--nt-white);

  box-shadow:
    0 10px 24px rgba(1, 84, 212, 0.24);
}

.nt-software-btn-secondary {
  background: var(--nt-white);

  color: var(--nt-navy);

  border: 1px solid var(--nt-border);
}

.nt-software-btn-secondary:hover {
  background: #F9FAFB;

  color: var(--nt-navy);

  border-color: #BBC5D3;
}


/* ==========================================================
   SOFTWARE INTRO
   ========================================================== */

.nt-software-intro {
  padding:
    clamp(72px, 7vw, 100px)
    0;
}

.nt-software-section-heading {
  max-width: 760px;

  margin-bottom: 44px;
}

.nt-software-section-heading h2,
.nt-custom-software h2 {
  margin:
    0
    0
    18px;

  color: var(--nt-navy);

  font-size:
    clamp(
      2.15rem,
      3.5vw,
      3.25rem
    );

  font-weight: 750;

  line-height: 1.1;

  letter-spacing: -0.035em;
}

.nt-software-section-heading p,
.nt-custom-software p {
  color: var(--nt-muted);

  font-size: 1.05rem;

  line-height: 1.72;
}


/* ==========================================================
   SOFTWARE BENEFIT CARDS
   ========================================================== */

.nt-software-benefits {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 22px;
}

.nt-software-benefit {
  padding: 28px;

  background: var(--nt-white);

  border: 1px solid var(--nt-border);

  border-radius: 16px;

  box-shadow:
    0 4px 16px rgba(10, 9, 61, 0.05);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.nt-software-benefit:hover {
  transform: translateY(-2px);

  border-color:
    rgba(1, 84, 212, 0.18);

  box-shadow: var(--nt-shadow-md);
}

.nt-software-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  margin-bottom: 20px;

  border-radius: 10px;

  background: var(--nt-blue-soft);

  color: var(--nt-blue);

  font-size: 0.84rem;
  font-weight: 800;
}

.nt-software-benefit h3 {
  margin:
    0
    0
    10px;

  color: var(--nt-navy);

  font-size: 1.28rem;
}

.nt-software-benefit p {
  margin: 0;

  color: var(--nt-muted);

  line-height: 1.68;
}


/* ==========================================================
   FEATURED PRODUCT - GUGUNEST
   ========================================================== */

.nt-product-section {
  padding:
    clamp(72px, 7vw, 105px)
    0;

  background: var(--nt-light);
}

.nt-product-card {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr);

  gap:
    clamp(
      38px,
      6vw,
      72px
    );

  align-items: center;

  padding:
    clamp(
      34px,
      4.5vw,
      58px
    );

  background: var(--nt-white);

  border:
    1px solid
    var(--nt-border);

  border-radius: 24px;

  box-shadow:
    0 20px 55px
    rgba(10, 9, 61, 0.08);
}

.nt-product-label {
  display: inline-block;

  margin-bottom: 14px;

  padding:
    6px
    11px;

  background: var(--nt-blue-soft);

  color: var(--nt-blue);

  border-radius: 999px;

  font-size: 0.76rem;
  font-weight: 800;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}

.nt-product-content h2 {
  margin:
    0
    0
    12px;

  color: var(--nt-navy);

  font-size:
    clamp(
      2.6rem,
      4.3vw,
      3.8rem
    );

  font-weight: 780;

  letter-spacing: -0.04em;
}

.nt-product-tagline {
  color: var(--nt-text) !important;

  font-size: 1.20rem;
  font-weight: 650;

  line-height: 1.55 !important;
}

.nt-product-content p {
  color: var(--nt-muted);

  line-height: 1.72;
}


/* Product features */
.nt-product-features {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    12px
    20px;

  margin-top: 26px;
}

.nt-product-feature {
  display: flex;
  align-items: flex-start;

  gap: 9px;

  color: #344054;

  line-height: 1.5;
}

.nt-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 22px;
  height: 22px;

  margin-top: 1px;

  border-radius: 50%;

  background: #EDF4FF;

  color: var(--nt-blue);

  font-size: 0.74rem;
  font-weight: 900;
}


/* ==========================================================
   GUGUNEST SOFTWARE MOCKUP
   ========================================================== */

.nt-product-window {
  overflow: hidden;

  background: var(--nt-white);

  border: 1px solid #DDE3EC;

  border-radius: 18px;

  box-shadow:
    0 25px 60px rgba(10, 9, 61, 0.14);
}

.nt-product-window-top {
  display: flex;

  gap: 6px;

  padding:
    12px
    15px;

  background: #F8FAFC;

  border-bottom:
    1px solid
    #E8EBF0;
}

.nt-product-window-top span {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: #CBD2DC;
}

.nt-product-window-body {
  padding:
    clamp(
      32px,
      4vw,
      50px
    );

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(1, 84, 212, 0.08),
      transparent 40%
    ),
    #FFFFFF;
}

.nt-gugunest-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 68px;
  height: 68px;

  margin:
    0 auto
    15px;

  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      #0154D4,
      #0A093D
    );

  color: #FFFFFF;

  font-size: 2rem;
  font-weight: 800;

  box-shadow:
    0 12px 26px rgba(1, 84, 212, 0.20);
}

.nt-gugunest-name {
  color: var(--nt-navy);

  font-size: 1.9rem;
  font-weight: 780;

  letter-spacing: -0.03em;
}

.nt-gugunest-subtitle {
  margin-top: 5px;

  color: var(--nt-muted);

  font-size: 0.93rem;
}

.nt-demo-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 11px;

  margin-top: 28px;
}

.nt-demo-card {
  padding:
    15px
    11px;

  background: #F8FAFC;

  border:
    1px solid
    var(--nt-border);

  border-radius: 10px;

  color: #344054;

  font-size: 0.88rem;
  font-weight: 650;
}


/* ==========================================================
   CUSTOM SOFTWARE SECTION
   ========================================================== */

.nt-custom-software {
  padding:
    clamp(76px, 8vw, 110px)
    0;
}

.nt-custom-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap:
    clamp(
      42px,
      7vw,
      82px
    );

  align-items: start;
}

.nt-custom-list {
  display: grid;

  gap: 15px;
}

.nt-custom-list > div {
  padding:
    21px
    23px;

  background: var(--nt-white);

  border: 1px solid var(--nt-border);

  border-radius: 13px;
}

.nt-custom-list strong {
  display: block;

  margin-bottom: 5px;

  color: var(--nt-navy);

  font-size: 1.03rem;
}

.nt-custom-list span {
  color: var(--nt-muted);

  line-height: 1.6;
}


/* ==========================================================
   SOFTWARE CTA
   ========================================================== */

.nt-software-cta {
  padding:
    72px
    0;

  background:
    linear-gradient(
      135deg,
      #0A093D 0%,
      #11115A 100%
    );
}

.nt-software-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 36px;
}

.nt-software-cta h2 {
  margin:
    0
    0
    12px;

  color: #FFFFFF;

  font-size:
    clamp(
      2.1rem,
      3.7vw,
      3.15rem
    );

  line-height: 1.1;
}

.nt-software-cta p {
  max-width: 680px;

  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.76
    );

  font-size: 1.03rem;

  line-height: 1.68;
}

.nt-eyebrow-light {
  color: #8EB8FF;
}

.nt-software-btn-light {
  flex: 0 0 auto;

  background: var(--nt-white);

  color: var(--nt-navy);
}

.nt-software-btn-light:hover {
  background: #F1F4F8;

  color: var(--nt-navy);
}


/* ==========================================================
   MEDIUM DESKTOP
   ========================================================== */

@media (max-width: 1350px) {

  header.wp-block-template-part > .wp-block-group {
    width: calc(100% - 36px);
  }

  header .wp-block-site-logo img {
    width: 180px;
  }

  header .wp-block-navigation {
    font-size: 14px;
  }

  header .wp-block-navigation__container {
    gap: 16px;
  }

  header
  .wp-block-navigation__container
  > .wp-block-navigation-item:last-child
  > .wp-block-navigation-item__content {

    padding:
      9px
      14px;
  }

  header .gtranslate_wrapper {
    margin-left: 8px !important;
  }

}


/* ==========================================================
   TABLET / SMALL DESKTOP
   ========================================================== */

@media (max-width: 1100px) {

  header.wp-block-template-part > .wp-block-group {
    width: calc(100% - 30px);
  }

  header .wp-block-site-logo img {
    width: 170px;
  }

  header .wp-block-navigation {
    font-size: 14px;
  }

  header .wp-block-navigation__container {
    gap: 13px;
  }

  header .gtranslate_wrapper select,
  header .gtranslate_wrapper .gt_selector {
    min-width: 118px !important;
    max-width: 130px !important;

    font-size: 13px !important;
  }


  /* Software */
  .nt-software-benefits {
    grid-template-columns: 1fr;
  }

  .nt-product-card,
  .nt-custom-grid {
    grid-template-columns: 1fr;
  }

  .nt-product-visual {
    max-width: 620px;
  }

  .nt-software-cta-inner {
    align-items: flex-start;

    flex-direction: column;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 782px) {

  h1 {
    font-size:
      clamp(
        2.2rem,
        10vw,
        3rem
      );
  }

  h2 {
    font-size:
      clamp(
        1.8rem,
        8vw,
        2.35rem
      );
  }

  .nt-card {
    padding: 22px;
  }


  /* Header */
  header.wp-block-template-part > .wp-block-group {
    width: calc(100% - 24px);

    padding-top: 10px;
    padding-bottom: 10px;
  }

  header .wp-block-site-logo img {
    width: 155px;
  }


  /* Translator */
  header .gtranslate_wrapper {
    margin-left: 6px !important;
  }

  header .gtranslate_wrapper select,
  header .gtranslate_wrapper .gt_selector {
    min-width: 105px !important;
    max-width: 115px !important;

    height: 32px !important;
    min-height: 32px !important;

    padding:
      4px
      23px
      4px
      7px !important;

    font-size: 12px !important;
  }


  /* Mobile menu CTA */
  header
  .wp-block-navigation__responsive-container
  .wp-block-navigation-item:last-child
  .wp-block-navigation-item__content {

    width: 100%;

    margin-top: 6px;

    padding:
      12px
      16px;

    text-align: center;
  }


  /* Software */
  .nt-software-container {
    width: calc(100% - 30px);
  }

  .nt-software-hero {
    padding:
      65px
      0;
  }

  .nt-software-hero h1 {
    font-size:
      clamp(
        2.4rem,
        11vw,
        3.35rem
      );
  }

  .nt-software-actions {
    flex-direction: column;
  }

  .nt-software-btn {
    width: 100%;
  }

  .nt-product-card {
    padding:
      25px
      20px;

    border-radius: 18px;
  }

  .nt-product-features {
    grid-template-columns: 1fr;
  }

  .nt-demo-grid {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  header .wp-block-site-logo img {
    width: 140px;
  }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

:focus-visible {
  outline:
    3px solid
    rgba(1, 84, 212, 0.35);

  outline-offset: 3px;
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    transition: none !important;
  }

}