/**
* Template Name: Arsha - v4.7.1
* Template URL: https://bootstrapmade.com/arsha-free-bootstrap-html-template-corporate/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: "Inter", sans-serif;
  color: #101826;
}

a {
  color: #4c8dff;
  text-decoration: none;
}

a:hover {
  color: #6ee7ff;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Space Grotesk", sans-serif;
}

/* Preloader now lives further down this file (circular progress + %) */
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 85px;
  z-index: 996;
  background: #629ef7;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s;
}
.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}
.back-to-top:hover {
  background: #6bc1e9;
  color: #fff;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  transition: all 0.5s;
  z-index: 997;
  padding: 15px 0;
}
#header.header-scrolled, #header.header-inner-pages {
  background: rgba(29, 50, 87, 0.9);
}
#header .logo {
  font-size: 30px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#header .logo a {
  color: #fff;
}
#header .logo img {
  max-height: 40px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}
.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}
.navbar li {
  position: relative;
}
.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: 0.3s;
}
.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #629ef7;
}
.navbar .getstarted, .navbar .getstarted:focus {
  padding: 8px 20px;
  margin-left: 30px;
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  border: 2px solid #629ef7;
  font-weight: 600;
}
.navbar .getstarted:hover, .navbar .getstarted:focus:hover {
  color: #fff;
  background: #3b87f7;
}
.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}
.navbar .dropdown ul li {
  min-width: 200px;
}
.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 14px;
  text-transform: none;
  font-weight: 500;
  color: #0c3c53;
}
.navbar .dropdown ul a i {
  font-size: 12px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #629ef7;
}
.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}
.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}
@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
  color: #fff;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}
.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(29, 50, 87, 0.9);
  transition: 0.3s;
  z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}
.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  border-radius: 10px;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}
.navbar-mobile a, .navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #243e6d;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #629ef7;
}
.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
  margin: 15px;
  color: #243e6d;
}
.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
  min-width: 200px;
}
.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #629ef7;
}
.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 80vh;
  background: #243e6d;
}
#hero .container {
  padding-top: 72px;
}
#hero h1 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  color: #fff;
}
#hero h2 {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 50px;
  font-size: 24px;
}
#hero .btn-get-started {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 11px 28px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px 0 0 0;
  color: #fff;
  background: #629ef7;
}
#hero .btn-get-started:hover {
  background: #3b87f7;
}
#hero .btn-watch-video {
  font-size: 16px;
  display: flex;
  align-items: center;
  transition: 0.5s;
  margin: 10px 0 0 25px;
  color: #fff;
  line-height: 1;
}
#hero .btn-watch-video i {
  line-height: 0;
  color: #fff;
  font-size: 32px;
  transition: 0.3s;
  margin-right: 8px;
}
#hero .btn-watch-video:hover i {
  color: #629ef7;
}
#hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}
@media (max-width: 991px) {
  #hero {
    height: 100vh;
    text-align: center;
  }
  #hero .animated {
    -webkit-animation: none;
    animation: none;
  }
  #hero .hero-img {
    text-align: center;
  }
  #hero .hero-img img {
    width: 50%;
  }
}
@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #hero h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
  #hero .hero-img img {
    width: 70%;
  }
}
@media (max-width: 575px) {
  #hero .hero-img img {
    width: 80%;
  }
  #hero .btn-get-started {
    font-size: 16px;
    padding: 10px 24px 11px 24px;
  }
}

@-webkit-keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-bg {
  background-color: #f3f5fa;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}
.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #243e6d;
}
.section-title h2::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}
.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #629ef7;
  bottom: 0;
  left: calc(50% - 20px);
}
.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients {
  padding: 12px 0;
  text-align: center;
}
.clients img {
  max-width: 45%;
  transition: all 0.4s ease-in-out;
  display: inline-block;
  padding: 15px 0;
  /* filter: grayscale(100); */
}
.clients img:hover {
  filter: none;
  transform: scale(1.1);
}
@media (max-width: 768px) {
  .clients img {
    max-width: 40%;
  }
}

/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
.about .content h3 {
  font-weight: 600;
  font-size: 26px;
}
.about .content ul {
  list-style: none;
  padding: 0;
}
.about .content ul li {
  padding-left: 28px;
  position: relative;
}
.about .content ul li + li {
  margin-top: 10px;
}
.about .content ul i {
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 20px;
  color: #629ef7;
  line-height: 1;
}
.about .content p:last-child {
  margin-bottom: 0;
}
.about .content .btn-learn-more {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 4px;
  transition: 0.3s;
  line-height: 1;
  color: #629ef7;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  margin-top: 6px;
  border: 2px solid #629ef7;
}
.about .content .btn-learn-more:hover {
  background: #629ef7;
  color: #fff;
  text-decoration: none;
}

/*--------------------------------------------------------------
# Why Us
--------------------------------------------------------------*/
.why-us .content {
  padding: 60px 100px 0 100px;
}
.why-us .content h3 {
  font-weight: 400;
  font-size: 34px;
  color: #243e6d;
}
.why-us .content h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 5px;
}
.why-us .content p {
  font-size: 15px;
  color: #848484;
}
.why-us .img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.why-us .accordion-list {
  padding: 0 100px 60px 100px;
}
.why-us .accordion-list ul {
  padding: 0;
  list-style: none;
}
.why-us .accordion-list li + li {
  margin-top: 15px;
}
.why-us .accordion-list li {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}
.why-us .accordion-list a {
  display: block;
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding-right: 30px;
  outline: none;
  cursor: pointer;
}
.why-us .accordion-list span {
  color: #629ef7;
  font-weight: 600;
  font-size: 18px;
  padding-right: 10px;
}
.why-us .accordion-list i {
  font-size: 24px;
  position: absolute;
  right: 0;
  top: 0;
}
.why-us .accordion-list p {
  margin-bottom: 0;
  padding: 10px 0 0 0;
}
.why-us .accordion-list .icon-show {
  display: none;
}
.why-us .accordion-list a.collapsed {
  color: #343a40;
}
.why-us .accordion-list a.collapsed:hover {
  color: #629ef7;
}
.why-us .accordion-list a.collapsed .icon-show {
  display: inline-block;
}
.why-us .accordion-list a.collapsed .icon-close {
  display: none;
}
@media (max-width: 1024px) {
  .why-us .content, .why-us .accordion-list {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 992px) {
  .why-us .img {
    min-height: 400px;
  }
  .why-us .content {
    padding-top: 30px;
  }
  .why-us .accordion-list {
    padding-bottom: 30px;
  }
}
@media (max-width: 575px) {
  .why-us .img {
    min-height: 200px;
  }
}

/*--------------------------------------------------------------
# Skills
--------------------------------------------------------------*/
.skills .content h3 {
  font-weight: 700;
  font-size: 32px;
  color: #243e6d;
  font-family: "Poppins", sans-serif;
}
.skills .content ul {
  list-style: none;
  padding: 0;
}
.skills .content ul li {
  padding-bottom: 10px;
}
.skills .content ul i {
  font-size: 20px;
  padding-right: 4px;
  color: #629ef7;
}
.skills .content p:last-child {
  margin-bottom: 0;
}
.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}
.skills .progress .skill {
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  color: #243e6d;
}
.skills .progress .skill .val {
  float: right;
  font-style: normal;
}
.skills .progress-bar-wrap {
  background: #e8edf5;
  height: 10px;
}
.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: #4668a2;
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
  box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
  padding: 50px 30px;
  transition: all ease-in-out 0.4s;
  background: #fff;
}
.services .icon-box .icon {
  margin-bottom: 10px;
}
.services .icon-box .icon i {
  color: #629ef7;
  font-size: 36px;
  transition: 0.3s;
}
.services .icon-box h4 {
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 24px;
}
.services .icon-box h4 a {
  color: #243e6d;
  transition: ease-in-out 0.3s;
}
.services .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}
.services .icon-box:hover {
  transform: translateY(-10px);
}
.services .icon-box:hover h4 a {
  color: #629ef7;
}

/*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
.cta {
  background: linear-gradient(rgba(29, 50, 87, 0.9), rgba(29, 50, 87, 0.9)), url("../img/cta-bg.jpg") fixed center center;
  background-size: cover;
  padding: 120px 0;
}
.cta h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}
.cta p {
  color: #fff;
}
.cta .cta-btn {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid #fff;
  color: #fff;
}
.cta .cta-btn:hover {
  background: #629ef7;
  border: 2px solid #629ef7;
}
@media (max-width: 1024px) {
  .cta {
    background-attachment: scroll;
  }
}
@media (min-width: 769px) {
  .cta .cta-btn-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .content h3 {
  font-weight: 700;
  font-size: 26px;
  color: #243e6d;
  font-family: "Poppins", sans-serif;
}
.portfolio #portfolio-flters {
  list-style: none;
  margin-bottom: 20px;
}
.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  margin: 10px 5px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #444444;
  transition: all 0.3s;
  padding: 8px 20px;
  border-radius: 50px;
  font-family: "Poppins", sans-serif;
}
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
  background: #629ef7;
  color: #fff;
}
.portfolio .portfolio-item {
  margin-bottom: 30px;
}
.portfolio .portfolio-item .portfolio-img {
  overflow: hidden;
}
.portfolio .portfolio-item .portfolio-img img {
  transition: all 0.6s;
}
.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 15px;
  bottom: 0;
  z-index: 3;
  right: 15px;
  transition: all 0.3s;
  background: rgba(55, 81, 126, 0.8);
  padding: 10px 15px;
}
.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0px;
}
.portfolio .portfolio-item .portfolio-info p {
  color: #f9fcfe;
  font-size: 14px;
  margin-bottom: 0;
}
.portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 40px;
  font-size: 24px;
  top: calc(50% - 18px);
  color: #fff;
  transition: 0.3s;
}
.portfolio .portfolio-item .portfolio-info .preview-link:hover, .portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: #629ef7;
}
.portfolio .portfolio-item .portfolio-info .details-link {
  right: 10px;
}
.portfolio .portfolio-item:hover .portfolio-img img {
  transform: scale(1.15);
}
.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 40px;
}
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #629ef7;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #629ef7;
}
.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(55, 81, 126, 0.08);
}
.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}
.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}
.portfolio-details .portfolio-description {
  padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
  padding: 0;
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team .member {
  position: relative;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  border-radius: 5px;
  background: #fff;
  transition: 0.5s;
}
.team .member .pic {
  overflow: hidden;
  width: 180px;
  border-radius: 50%;
}
.team .member .pic img {
  transition: ease-in-out 0.3s;
}
.team .member:hover {
  transform: translateY(-10px);
}
.team .member .member-info {
  padding-left: 30px;
}
.team .member h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
  color: #243e6d;
}
.team .member span {
  display: block;
  font-size: 15px;
  padding-bottom: 10px;
  position: relative;
  font-weight: 500;
}
.team .member span::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: #cbd6e9;
  bottom: 0;
  left: 0;
}
.team .member p {
  margin: 10px 0 0 0;
  font-size: 14px;
}
.team .member .social {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.team .member .social a {
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: 32px;
  height: 32px;
  background: #eff2f8;
}
.team .member .social a i {
  color: #243e6d;
  font-size: 16px;
  margin: 0 2px;
}
.team .member .social a:hover {
  background: #629ef7;
}
.team .member .social a:hover i {
  color: #fff;
}
.team .member .social a + a {
  margin-left: 8px;
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .row {
  padding-top: 40px;
}
.pricing .box {
  padding: 60px 40px;
  box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.1);
  background: #fff;
  height: 100%;
  border-top: 4px solid #fff;
  border-radius: 5px;
}
.pricing h3 {
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 20px;
  color: #243e6d;
}
.pricing h4 {
  font-size: 48px;
  color: #243e6d;
  font-weight: 400;
  font-family: "Jost", sans-serif;
  margin-bottom: 25px;
}
.pricing h4 sup {
  font-size: 28px;
}
.pricing h4 span {
  color: #629ef7;
  font-size: 18px;
  display: block;
}
.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: #999;
  text-align: left;
  line-height: 20px;
}
.pricing ul li {
  padding: 10px 0 10px 30px;
  position: relative;
}
.pricing ul i {
  color: #28a745;
  font-size: 24px;
  position: absolute;
  left: 0;
  top: 6px;
}
.pricing ul .na {
  color: #ccc;
}
.pricing ul .na i {
  color: #ccc;
}
.pricing ul .na span {
  text-decoration: line-through;
}
.pricing .buy-btn {
  display: inline-block;
  padding: 12px 35px;
  border-radius: 50px;
  color: #629ef7;
  transition: none;
  font-size: 16px;
  font-weight: 500;
  font-family: "Jost", sans-serif;
  transition: 0.3s;
  border: 1px solid #629ef7;
}
.pricing .buy-btn:hover {
  background: #629ef7;
  color: #fff;
}
.pricing .featured {
  border-top-color: #629ef7;
}
.pricing .featured .buy-btn {
  background: #629ef7;
  color: #fff;
}
.pricing .featured .buy-btn:hover {
  background: #23a3df;
}
@media (max-width: 992px) {
  .pricing .box {
    max-width: 60%;
    margin: 0 auto 30px auto;
  }
}
@media (max-width: 767px) {
  .pricing .box {
    max-width: 80%;
    margin: 0 auto 30px auto;
  }
}
@media (max-width: 420px) {
  .pricing .box {
    max-width: 100%;
    margin: 0 auto 30px auto;
  }
}

/*--------------------------------------------------------------
# Frequently Asked Questions
--------------------------------------------------------------*/
.faq .faq-list {
  padding: 0 100px;
}
.faq .faq-list ul {
  padding: 0;
  list-style: none;
}
.faq .faq-list li + li {
  margin-top: 15px;
}
.faq .faq-list li {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  position: relative;
}
.faq .faq-list a {
  display: block;
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding: 0 30px;
  outline: none;
  cursor: pointer;
}
.faq .faq-list .icon-help {
  font-size: 24px;
  position: absolute;
  right: 0;
  left: 20px;
  color: #629ef7;
}
.faq .faq-list .icon-show, .faq .faq-list .icon-close {
  font-size: 24px;
  position: absolute;
  right: 0;
  top: 0;
}
.faq .faq-list p {
  margin-bottom: 0;
  padding: 10px 0 0 0;
}
.faq .faq-list .icon-show {
  display: none;
}
.faq .faq-list a.collapsed {
  color: #243e6d;
  transition: 0.3s;
}
.faq .faq-list a.collapsed:hover {
  color: #629ef7;
}
.faq .faq-list a.collapsed .icon-show {
  display: inline-block;
}
.faq .faq-list a.collapsed .icon-close {
  display: none;
}
@media (max-width: 1200px) {
  .faq .faq-list {
    padding: 0;
  }
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info {
  border-top: 3px solid #629ef7;
  border-bottom: 3px solid #629ef7;
  padding: 30px;
  background: #fff;
  width: 100%;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
}
.contact .info i {
  font-size: 20px;
  color: #629ef7;
  float: left;
  width: 44px;
  height: 44px;
  background: #e7f5fb;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}
.contact .info h4 {
  padding: 0 0 0 60px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #243e6d;
}
.contact .info p {
  padding: 0 0 10px 60px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #6182ba;
}
.contact .info .email p {
  padding-top: 5px;
}
.contact .info .social-links {
  padding-left: 60px;
}
.contact .info .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #333;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
  margin-right: 10px;
}
.contact .info .social-links a:hover {
  background: #629ef7;
  color: #fff;
}
.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
  background: #629ef7;
  color: #fff;
}
.contact .php-email-form {
  width: 100%;
  border-top: 3px solid #629ef7;
  border-bottom: 3px solid #629ef7;
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
}
.contact .php-email-form .form-group {
  padding-bottom: 8px;
}
.contact .php-email-form .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}
.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}
.contact .php-email-form .error-message br + br {
  margin-top: 25px;
}
.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}
.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}
.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}
.contact .php-email-form .form-group {
  margin-bottom: 20px;
}
.contact .php-email-form label {
  padding-bottom: 8px;
}
.contact .php-email-form input, .contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  border-radius: 4px;
}
.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
  border-color: #629ef7;
}
.contact .php-email-form input {
  height: 44px;
}
.contact .php-email-form textarea {
  padding: 10px 12px;
}
.contact .php-email-form button[type=submit] {
  background: #629ef7;
  border: 0;
  padding: 12px 34px;
  color: #fff;
  transition: 0.4s;
  border-radius: 50px;
}
.contact .php-email-form button[type=submit]:hover {
  background: #3b87f7;
}
@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: #f3f5fa;
  min-height: 40px;
  margin-top: 72px;
}
@media (max-width: 992px) {
  .breadcrumbs {
    margin-top: 68px;
  }
}
.breadcrumbs h2 {
  font-size: 28px;
  font-weight: 600;
  color: #243e6d;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
}
.breadcrumbs ol li + li {
  padding-left: 10px;
}
.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #4668a2;
  content: "/";
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  font-size: 14px;
  background: #243e6d;
}
#footer .footer-newsletter {
  padding: 50px 0;
  background: #f3f5fa;
  text-align: center;
  font-size: 15px;
  color: #444444;
}
#footer .footer-newsletter h4 {
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 1;
  font-weight: 600;
  color: #243e6d;
}
#footer .footer-newsletter form {
  margin-top: 30px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border-radius: 50px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.06);
  text-align: left;
}
#footer .footer-newsletter form input[type=email] {
  border: 0;
  padding: 4px 8px;
  width: calc(100% - 100px);
}
#footer .footer-newsletter form input[type=submit] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: #629ef7;
  color: #fff;
  transition: 0.3s;
  border-radius: 50px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
#footer .footer-newsletter form input[type=submit]:hover {
  background: #3b87f7;
}
#footer .footer-top {
  padding: 60px 0 30px 0;
  background: #fff;
}
#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}
#footer .footer-top .footer-contact h3 {
  font-size: 28px;
  margin: 0 0 10px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 600;
  color: #243e6d;
}
#footer .footer-top .footer-contact p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Jost", sans-serif;
  color: #5e5e5e;
}
#footer .footer-top h4 {
  font-size: 16px;
  font-weight: bold;
  color: #243e6d;
  position: relative;
  padding-bottom: 12px;
}
#footer .footer-top .footer-links {
  margin-bottom: 30px;
}
#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #629ef7;
  font-size: 18px;
  line-height: 1;
}
#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}
#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}
#footer .footer-top .footer-links ul a {
  color: #777777;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}
#footer .footer-top .footer-links ul a:hover {
  text-decoration: none;
  color: #629ef7;
}
#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #629ef7;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}
#footer .footer-top .social-links a:hover {
  background: #3b87f7;
  color: #fff;
  text-decoration: none;
}
#footer .footer-bottom {
  padding-top: 30px;
  padding-bottom: 30px;
  color: #fff;
}
#footer .copyright {
  float: left;
}
#footer .credits {
  float: right;
  font-size: 13px;
}
#footer .credits a {
  transition: 0.3s;
}
@media (max-width: 768px) {
  #footer .footer-bottom {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #footer .copyright, #footer .credits {
    text-align: center;
    float: none;
  }
  #footer .credits {
    padding-top: 4px;
  }
}

/*--------------------------------------------------------------
  CyberTitan Labs — redesign layer
  Merged from the former redesign.css. It was originally loaded after this
  file so its selectors could override the legacy #hero/#header/.navbar-mobile
  rules above by re-declaring them (later source wins on tied specificity).
  Appended here at the end, that same override order is preserved. New
  sections below use fresh classes that don't collide with the legacy rules
  above, so most of this block is additive, not override.
--------------------------------------------------------------*/

/* Tailwind's Play CDN generates a `.collapse { visibility: collapse }`
   utility (for hiding table rows) that collides with Bootstrap's own
   `.collapse` component class (JS-driven show/hide via display:none).
   Forcing visibility back to visible is safe: Bootstrap's display:none
   on the closed state already fully hides the element regardless of
   this property, so this only restores the *expanded* state. Without
   this, every Bootstrap collapse panel (FAQ answers, etc.) renders
   present-but-invisible text once opened. */
.collapse {
  visibility: visible !important;
}

:root {
  --ink: #05070d;
  --ink-2: #0a1220;
  --brand: #243e6d;
  --brand-light: #3a5a99;
  --electric: #4c8dff;
  --signal: #6ee7ff;
  --paper: #f3f5f9;
  --paper-2: #eef2fa;
  --ink-text: #101826;
  --mist: #dfe6f2;
}

html {
  background: var(--paper);
}

body {
  background: var(--paper);
}

/*--------------------------------------------------------------
# Focus states (keyboard accessibility)
--------------------------------------------------------------*/
/* Each page's inline .visually-hidden rule uses !important on
   height/width, which silently defeated the .skip-link:focus reveal.
   Matching !important here so the skip link actually becomes visible. */
.skip-link:focus {
  position: absolute !important;
  left: 1rem !important;
  top: 1rem !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  padding: 0.6rem 1.2rem !important;
  background: #fff !important;
  color: var(--ink-text) !important;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 10000;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 3px;
  border-radius: 4px;
}

/*--------------------------------------------------------------
# Preloader — circular progress ring + percentage
--------------------------------------------------------------*/
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--ink);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-ring-wrap {
  position: relative;
  width: 140px;
  height: 140px;
}
.preloader-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.preloader-ring-track {
  fill: none;
  stroke: rgba(76, 141, 255, 0.16);
  stroke-width: 3;
}
.preloader-ring-progress {
  fill: none;
  stroke: var(--electric);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  filter: drop-shadow(0 0 6px rgba(76, 141, 255, 0.65));
}
.preloader-percent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.35rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.02em;
}
.preloader-label {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(223, 230, 242, 0.5);
}
.preloader-dots {
  display: inline-block;
  width: 1.2em;
  animation: preloader-dots-cycle 1.2s steps(4) infinite;
  overflow: hidden;
  vertical-align: bottom;
}
@keyframes preloader-dots-cycle {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/*--------------------------------------------------------------
# Header / nav — glass, transparent to blurred on scroll
--------------------------------------------------------------*/
/* The blurred pane lives on a pseudo-element, NOT on #header itself.
   backdrop-filter (like transform and filter) makes an element the containing
   block for its position:fixed descendants — and .navbar-mobile, the
   full-screen mobile menu overlay, is a fixed descendant of #header. With the
   filter on the header, `inset: 0` resolved against the 96px header instead of
   the viewport, so the open menu was clipped to a sliver and its links were
   invisible. That hit every inner page always (.header-inner-pages) and the
   home page as soon as you scrolled (.header-scrolled). */
#header {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
#header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(135deg, rgba(5, 7, 13, 0.94), rgba(10, 18, 32, 0.94));
  transition: opacity 0.4s ease;
}
#header.header-scrolled::before,
#header.header-inner-pages::before {
  opacity: 1;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
#header.header-scrolled,
#header.header-inner-pages {
  border-bottom: 1px solid rgba(76, 141, 255, 0.22);
  box-shadow: 0 8px 30px -14px rgba(0, 0, 0, 0.5);
}
#header .logo img {
  max-height: 34px;
  /* the width/height attributes exist to give the browser the aspect ratio up
     front (no header reflow on load); width:auto stops the attribute width
     from winning over max-height and stretching the wordmark */
  width: auto;
}
.navbar a,
.navbar a:focus {
  font-family: "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.82);
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
  color: #fff;
}
.navbar .getstarted,
.navbar .getstarted:focus {
  border: 1px solid var(--electric);
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  color: #fff;
  font-family: "Inter", sans-serif;
}
.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
  background: linear-gradient(135deg, var(--signal), var(--electric));
  color: var(--ink);
}
.mobile-nav-toggle {
  color: #fff;
}
.navbar-mobile {
  background: rgba(5, 7, 13, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.navbar-mobile ul {
  background-color: var(--paper);
}
.navbar-mobile a,
.navbar-mobile a:focus {
  color: var(--ink-text);
  font-family: "Inter", sans-serif;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
  color: var(--brand);
}
.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  color: #fff;
  margin: 4px 0;
}

/*--------------------------------------------------------------
# Hero — dark, interactive
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: auto;
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  display: flex;
  align-items: center;
}
#hero .container {
  padding-top: 96px;
  padding-bottom: 96px;
  position: relative;
  z-index: 3;
}
#hero h1 {
  margin: 0;
  color: #fff;
}

/* faint animated grid, masked so it fades toward the edges */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(76, 141, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 141, 255, 0.12) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, black 35%, transparent 85%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, black 35%, transparent 85%);
  animation: grid-drift 50s linear infinite;
}
@keyframes grid-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 460px 460px;
  }
}

/* cursor-reactive glow — --mx/--my set by redesign.js on mousemove */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(650px circle at var(--mx, 50%) var(--my, 28%), rgba(76, 141, 255, 0.24), transparent 62%);
}

/* vertical signal beams */
.hero-beam {
  position: absolute;
  top: -10%;
  width: 1px;
  height: 120%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(110, 231, 255, 0.55), transparent);
  animation: beam-drift 13s ease-in-out infinite;
}
.hero-beam:nth-of-type(1) {
  left: 12%;
  animation-delay: -1s;
}
.hero-beam:nth-of-type(2) {
  left: 52%;
  animation-delay: -5s;
}
.hero-beam:nth-of-type(3) {
  left: 86%;
  animation-delay: -9s;
}
@keyframes beam-drift {
  0%,
  100% {
    opacity: 0.12;
    transform: translateX(0);
  }
  50% {
    opacity: 0.5;
    transform: translateX(14px);
  }
}

/* fade the hero into the light section below */
.hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  z-index: 2;
  pointer-events: none;
  /* Fading from rgba(...,0) of the target color, not the bare "transparent"
     keyword — that interpolates through black on the way, leaving a muddy
     dark band right before the solid color. Matches the clients section's
     paper background directly below.
     A plain 2-stop linear-gradient alpha-blends in sRGB space, which bunches
     almost all of the perceived brightness change into the last ~15% of the
     fade — it reads as a hard edge even though the math is linear. The
     extra stops below follow an eased curve so the brightness ramps evenly. */
  background: linear-gradient(
    180deg,
    rgba(246, 248, 252, 0) 0%,
    rgba(246, 248, 252, 0.013) 8.1%,
    rgba(246, 248, 252, 0.049) 15.5%,
    rgba(246, 248, 252, 0.104) 22.5%,
    rgba(246, 248, 252, 0.175) 29%,
    rgba(246, 248, 252, 0.259) 35.3%,
    rgba(246, 248, 252, 0.352) 41.2%,
    rgba(246, 248, 252, 0.45) 47.1%,
    rgba(246, 248, 252, 0.55) 52.9%,
    rgba(246, 248, 252, 0.648) 58.8%,
    rgba(246, 248, 252, 0.741) 64.7%,
    rgba(246, 248, 252, 0.825) 70.6%,
    rgba(246, 248, 252, 0.896) 77.5%,
    rgba(246, 248, 252, 0.951) 84.5%,
    rgba(246, 248, 252, 0.987) 91.9%,
    var(--paper) 100%
  );
}

/* terminal card */
.terminal-card {
  background: rgba(10, 18, 32, 0.86);
  border: 1px solid rgba(76, 141, 255, 0.28);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.terminal-body {
  min-height: 210px;
}
.terminal-caret {
  display: inline-block;
  width: 0.55ch;
  margin-left: 1px;
  background: var(--signal);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}
.terminal-line-ok {
  color: var(--signal);
}
.terminal-line-dim {
  color: rgba(223, 230, 242, 0.55);
}
.terminal-line-cmd {
  color: #fff;
}
.terminal-body {
  color: #fff;
}

/*--------------------------------------------------------------
# Footer — dark bookend to match the hero
--------------------------------------------------------------*/
#footer {
  background: var(--ink);
}
#footer .footer-top {
  background: var(--ink-2);
}
#footer .footer-top .footer-contact h3,
#footer .footer-top h4 {
  color: #fff;
}
#footer .footer-top .footer-contact p {
  color: rgba(223, 230, 242, 0.65);
}
#footer .footer-links a {
  color: rgba(223, 230, 242, 0.8);
  font-family: "Inter", sans-serif;
  font-size: 14px;
}
#footer .footer-links a:hover {
  color: var(--signal);
}
#footer .footer-top .social-links a {
  background: var(--electric);
}
#footer .footer-top .social-links a:hover {
  background: var(--signal);
  color: var(--ink);
}
#footer .footer-bottom {
  color: rgba(223, 230, 242, 0.55);
  font-family: "Inter", sans-serif;
}
#footer .footer-bottom a {
  color: rgba(223, 230, 242, 0.75);
}
#footer .footer-bottom a:hover {
  color: var(--signal);
}

/*--------------------------------------------------------------
# Back to top
--------------------------------------------------------------*/
.back-to-top {
  background: var(--electric);
}
.back-to-top:hover {
  background: var(--signal);
  color: var(--ink);
}

/*--------------------------------------------------------------
# Clients strip — flex-wrap so logo count is never a layout problem
--------------------------------------------------------------*/
.clients-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 3.5rem;
}
.client-logo {
  width: 130px;
  height: 56px;
  object-fit: contain;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.client-logo:hover,
.client-logo:focus-visible {
  transform: translateY(-3px) scale(1.04);
  filter: drop-shadow(0 8px 16px rgba(16, 24, 38, 0.15));
}

/*--------------------------------------------------------------
# Shared section building blocks (new markup only — no legacy collision)
--------------------------------------------------------------*/
.section-eyebrow {
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
}

.tc-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(16, 24, 38, 0.25);
  border-color: rgba(76, 141, 255, 0.35);
}
.tc-card-num {
  position: absolute;
  top: 0.5rem;
  right: 1.25rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 3.75rem;
  line-height: 1;
  color: rgba(36, 62, 109, 0.06);
  pointer-events: none;
  user-select: none;
}

/*--------------------------------------------------------------
# Spec panel — dark floating card for stats/status on light sections
--------------------------------------------------------------*/
/* Shares .services-panel for its surface, same as .faq-panel, so all three
   cards on the page stay identical by construction. */
.spec-panel {
  overflow: hidden;
}
.spec-panel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--mist);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
}
.spec-panel-row:last-of-type {
  border-bottom: none;
}
.spec-panel-row span:first-child {
  color: #5c6c87;
}
.spec-panel-row span:last-child {
  color: var(--ink-text);
  font-weight: 500;
  text-align: right;
}
.spec-panel-cta {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: var(--brand);
}
.spec-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e9e5a;
  box-shadow: 0 0 0 3px rgba(30, 158, 90, 0.18);
  animation: spec-dot-pulse 2s ease-in-out infinite;
}
@keyframes spec-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.badge-tag {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: var(--paper-2);
  border: 1px solid var(--mist);
  color: var(--ink-text);
}

.tc-accordion-trigger[aria-expanded="true"] .tc-chevron {
  transform: rotate(180deg);
}
.tc-chevron {
  transition: transform 0.25s ease;
}

/*--------------------------------------------------------------
# Contact form status messages
# Previously scoped to a `.contact` ancestor class that this markup no
# longer has, so `display:none` never applied and all three could show
# at once regardless of actual form state.
--------------------------------------------------------------*/
.php-email-form .loading,
.php-email-form .error-message,
.php-email-form .sent-message {
  display: none;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.php-email-form .loading {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: var(--paper-2);
  color: var(--ink-text);
  font-weight: 500;
}
.php-email-form .loading.d-block {
  display: flex;
}
.php-email-form .loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--mist);
  border-top-color: var(--electric);
  animation: loading-spin 0.7s linear infinite;
}
@keyframes loading-spin {
  to { transform: rotate(360deg); }
}
.php-email-form .error-message {
  background: #fdecea;
  color: #b3261e;
  border: 1px solid #f5c2bd;
}
.php-email-form .sent-message {
  background: #e8f8ee;
  color: #1e7b41;
  border: 1px solid #b9e6c9;
}

/*--------------------------------------------------------------
# Services — full-section dark IDE backdrop, mirrors the hero
--------------------------------------------------------------*/
.services-ide {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  /* the legacy template gives every section 60px of its own padding, which was
     stacking on top of the container's padding below — at both ends. Both
     run-ins (from About above, into the CTA below) read as one huge empty
     band until the container padding was zeroed out. */
  padding-top: 2rem;
  padding-bottom: 3rem;
}
.services-ide > .container {
  position: relative;
  z-index: 2;
  padding-top: 0;
  padding-bottom: 0;
}
/* The claw-mark "slash" — a full dark code window masked down to three torn
   claw gashes. The mask is assets/img/claw-slash.svg, generated (and
   regenerable) by tools/claw-slash-gen.py: three tapered blades with
   multi-octave torn edges, fibre whiskers, and detached microtears.
   mask-size:contain keeps the SVG's own proportions (no stretch-distortion);
   mask-position:center drops the cluster into the gap the two content boxes
   leave open. Scoped to .services-slash-row-wrap, not the section, so the
   tear can never reach up into the heading. */
.services-slash-row-wrap {
  position: relative;
}
/* The heading sits above the tear, so the claw tips can run up behind it. */
.services-ide .section-title {
  position: relative;
  z-index: 3;
}
@media (min-width: 992px) {
  .services-slash-row-wrap {
    min-height: 48rem;
    display: flex;
    align-items: center;
    /* pulled up so the tips overlap the intro copy instead of leaving a band
       of empty paper between the heading and the cards */
    margin-top: -6rem;
  }
  .services-slash-row-wrap > .row {
    flex: 1 1 auto;
    /* wider than any Bootstrap gutter class goes: the two cards stay exactly
       half each, but the slot between them is wide enough for the middle claw
       mark to read as a tear rather than a dark stripe. The extra wrapper
       height does the same for the tips above and the tails below. */
    --bs-gutter-x: 6rem;
  }
}
/* The content sits above the tear, always. Both backdrop layers stay at
   z-index 0 and paint in DOM order (shadow slab, then window); the row is
   lifted to 2 so a panel can never be written over by the code behind it. */
.services-slash-row-wrap > .row {
  position: relative;
  z-index: 2;
}

/* Depth: the same claw shape as a flat dark slab whose drop-shadow spills onto
   the white page around every torn edge, so the gash reads as cut *through* the
   paper rather than painted on it. Kept on a separate, non-animating layer —
   the window itself scrolls its contents, and filtering an animated layer would
   force a full re-raster every frame. Absolutely positioned, so it is not a
   flex item of the wrapper above. */
.services-slash-row-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #0d1526;
  -webkit-mask-image: url("../img/claw-slash.svg");
  mask-image: url("../img/claw-slash.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 3px 5px rgba(16, 24, 38, 0.34)) drop-shadow(0 18px 34px rgba(16, 24, 38, 0.2));
}
.services-slash-window {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(165deg, var(--ink) 0%, var(--ink-2) 100%);
  -webkit-mask-image: url("../img/claw-slash.svg");
  mask-image: url("../img/claw-slash.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* What shows through the tear: four drifting columns of monospace text.
   Columns 1 and 3 are this site's own assets/js/redesign.js; columns 2 and 4
   are includes/header.php and includes/footer.php — all read off disk and
   highlighted in includes/slash-backdrop.php.
   Each column holds its content twice and slides -50%, so the loop is seamless;
   the four speeds differ slightly for a parallax feel. */
@media (max-width: 991.98px) {
  .services-slash-row-wrap::before,
  .services-slash-window {
    display: none;
  }
}

.slash-cols {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.slash-col {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
/* --slash-dur is set per column in includes/slash-backdrop.php, derived from
   that column's line count, so every column drifts at the same px/sec. */
.slash-track {
  will-change: transform;
  animation: slash-drift var(--slash-dur, 150s) linear infinite;
}
@keyframes slash-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .slash-track { animation: none; }
}
.slash-cols pre {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.65;
  white-space: pre;
  color: rgba(210, 216, 227, 0.9);
}
.slash-cols .tok-comment { color: rgba(170, 178, 194, 0.85); font-style: italic; }
.slash-cols .tok-kw      { color: rgba(216, 158, 209, 0.95); }
.slash-cols .tok-str     { color: rgba(168, 212, 138, 0.95); }
.slash-cols .tok-num     { color: rgba(224, 172, 122, 0.95); }
.slash-cols .log-ts      { color: rgba(150, 160, 178, 0.8); }
.slash-cols .log-svc     { color: rgba(109, 168, 255, 0.95); }
.slash-cols .log-ok      { color: rgba(168, 212, 138, 0.95); }
.slash-cols .log-warn    { color: rgba(232, 178, 106, 0.95); }
.slash-cols .log-dim     { color: rgba(198, 206, 219, 0.72); }

/* Services content boxes — the same white card language as the "Advantages"
   cards in the About section (white, --mist hairline, soft lift shadow, ghost
   numeral), so the two panels read as the intact page and the claw tear reads
   as what is underneath it. Very slightly translucent with a blur, so a hint
   of the code behind shows without ever competing with the text. */
.services-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--mist);
  border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(16, 24, 38, 0.4), 0 2px 6px rgba(16, 24, 38, 0.05);
  padding: 2.25rem;
}
/* One service per row: the two-up reading comes from the pair of cards, not
   from a grid inside them. */
.services-list-item {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--mist);
}
.services-list-item:first-child {
  padding-top: 0;
}
.services-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.services-list-item strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink-text);
  font-weight: 600;
}
.services-list-item p {
  color: #5c6c87;
}
.services-list-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(76, 141, 255, 0.12);
  color: var(--brand);
  font-size: 21px;
}
/* Sits below the tear entirely, on plain paper, so it stays legible. */
.services-panel-note {
  max-width: 44rem;
  margin-top: 2.5rem;
  font-size: 0.95rem;
  color: #5c6c87;
}
@media (max-width: 767.98px) {
  .services-panel {
    padding: 1.5rem;
  }
}

/*--------------------------------------------------------------
# FAQ dark panel
--------------------------------------------------------------*/
/* Shares .services-panel for its surface (white, hairline, soft lift) so the
   two stay identical by construction; this only adds the layout it needs as a
   full-height column beside the accordion. */
.faq-panel {
  overflow: hidden;
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.faq-panel-cta {
  align-self: flex-start;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  border: 1px solid var(--electric);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.faq-panel-cta:hover,
.faq-panel-cta:focus {
  background: linear-gradient(135deg, var(--brand-light), var(--electric));
  color: #fff;
}

/*--------------------------------------------------------------
# Reduced motion
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-grid,
  .hero-beam {
    animation: none !important;
  }
  .terminal-caret {
    animation: none !important;
    opacity: 1;
  }
  .tc-card:hover {
    transform: none;
  }
  .spec-panel-dot {
    animation: none !important;
    opacity: 1;
  }
}