@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Orbitron:wght@400..900&display=swap');

:root {
  --primary: #f5a900;
  --gold: #ffc83d;
  --honey: #ffb000;
  --dark: #211006;
  --brown: #321708;
  --brown2: #4a210b;
  --cream: #fff8e8;
  --muted: #8b8177;
  --border: #eadfcf;
  --card: #fffdf8;
  --shadow: 0 18px 45px rgba(86, 45, 7, .12);
  --container: 1200px
}
 p{
  font-family: "Inter", sans-serif !important;
 }



* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: 'Orbitron', system-ui, sans-serif !important;
  color: #2d241d;
  background: #fffdf8;
  line-height: 1.6
}

a {
  text-decoration: none;
  color: inherit
}

img {
  max-width: 100%;
  display: block
}

.container {
  width: min(var(--container), calc(100% - 32px));
  margin: auto
}

.section {
  padding: 96px 0
}

.text-center {
  text-align: center
}

.eyebrow {
  display: inline-block;
  padding: 6px 15px;
  border: 1px solid rgba(245, 169, 0, .35);
  background: rgba(245, 169, 0, .10);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9a6200;
  margin-bottom: 16px
}

.dark .eyebrow,
.hero .eyebrow {
  color: var(--primary);
  background: rgba(245, 169, 0, .12);
  border-color: rgba(245, 169, 0, .35)
}

h1,
h2,
h3,
h4 {
  font-family: 'Orbitron', system-ui, sans-serif;
  line-height: 1.15;
  margin-top: 0
}

h1 {
  font-size: clamp(42px, 6vw, 72px)
}

h2 {
  font-size: clamp(32px, 4vw, 48px)
}

h3 {
  font-size: 20px
}

.gradient-text {
  background: linear-gradient(110deg, #ffd85c, #ff9f00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 9px;
  font-weight: 700;
  transition: .25s;
  border: 1px solid transparent
}

.btn:hover {
  transform: translateY(-2px) scale(1.02)
}

.btn-gold {
  background: linear-gradient(110deg, #ffd85c, #ff9f00);
  color: #3b2107;
  box-shadow: 0 10px 30px rgba(245, 169, 0, .25)
}

.btn-outline {
  border-color: rgba(245, 169, 0, .55);
  color: var(--primary);
  background: transparent
}

.grid {
  display: grid;
  gap: 24px
}

.cards-3 {
  grid-template-columns: repeat(3, 1fr)
}

.cards-4 {
  grid-template-columns: repeat(4, 1fr)
}

.cards-2 {
  grid-template-columns: repeat(2, 1fr)
}

.card {
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 8px 25px rgba(76, 43, 8, .06);
  transition: .3s
}

.card:hover {
  transform: translateY(-5px);
  border-color: rgba(245, 169, 0, .5);
  box-shadow: var(--shadow)
}

.dark {
  background: var(--brown);
  color: #fff7e5
}

.dark .card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(245, 169, 0, .13);
  color: #fff7e5
}

.dark p {
  color: rgba(255, 247, 229, .64)
}

.warm-bg {
  background: linear-gradient(135deg, #fff9ed, #f7e7c7)
}

.honey-bg {
  background: linear-gradient(120deg, #ffe06b, #ff9d00)
}

.pattern {
  position: absolute;
  inset: 0;
  background-image: url('assets/honeycomb-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: .10;
  pointer-events: none
}

.iconbox {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(110deg, #ffd85c, #ff9f00);
  color: #3b2107;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 17px;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%)
}

/* navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(33, 16, 6, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(245, 169, 0, .2)
}

.nav-inner {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.logo {
  height: 56px;
  width: auto
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 27px;
  color: rgba(255, 247, 229, .78);
  font-size: 14px
}

.nav-links a {
  transition: .2s
}

.nav-links a:hover {
  color: var(--primary)
}

.phone-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #6b3a17;
  color: #fff;
  font-weight: 700
}

.mobile-toggle {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  font-size: 28px
}

.mobile-menu {
  display: none;
  padding: 14px 0;
  border-top: 1px solid rgba(245, 169, 0, .15)
}

.mobile-menu.open {
  display: block
}

.mobile-menu a {
  display: block;
  padding: 11px 0;
  color: rgba(255, 247, 229, .8)
}

/* hero */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: #241005
}

.hero:before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/hero-bg.png') center/cover no-repeat
}

.hero:after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(33, 16, 6, .62)
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 90px;
  max-width: 800px;
  color: #fff7e5
}

.hero p {
  max-width: 650px;
  font-size: 18px;
  color: rgba(255, 247, 229, .72)
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 34px 0 60px
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 45px
}

.stat {
  display: flex;
  gap: 11px;
  align-items: center
}

.stat-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(245, 169, 0, .15);
  display: grid;
  place-items: center;
  color: var(--primary);
  font-weight: bold
}

.stat strong {
  display: block;
  font: 700 23px Georgia;
  color: #fff
}

.stat span {
  display: block;
  font-size: 11px;
  color: rgba(255, 247, 229, .5)
}

/* sections */
.section-head {
  max-width: 760px;
  margin: 0 auto 58px;
  text-align: center
}

.section-head p {
  color: #82796f
}

.consultancy {
  position: relative;
  overflow: hidden
}

.consultancy:before,
.digital:before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/honeycomb-bg.jpg') center/cover;
  opacity: .08
}

.consultancy>*,
.digital>* {
  position: relative;
  z-index: 1
}

.service-card {
  background: rgba(255, 255, 255, .82)
}

.service-card h3 {
  font-size: 16px
}

.service-card p {
  font-size: 14px;
  color: #81776c
}

.framework-strip {
  padding: 22px;
  border: 1px solid var(--border);
  background: rgba(50, 23, 8, .04);
  border-radius: 14px;
  margin-top: 42px
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px
}

.chip {
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px
}

.chip:before {
  content: '✓';
  color: var(--primary);
  margin-right: 5px
}

.service-section {
  background: var(--brown);
  color: #fff
}

.service-section .section-head p {
  color: rgba(255, 247, 229, .6)
}

.service-section .card {
  background: rgba(105, 52, 18, .28)
}

.service-section .card p {
  color: rgba(255, 247, 229, .5)
}

.digital {
  position: relative;
  overflow: hidden
}

.objective {
  padding: 15px;
  background: rgba(245, 169, 0, .1);
  border: 1px solid rgba(245, 169, 0, .2);
  border-radius: 10px;
  font-size: 14px
}

.software-card {
  min-height: 190px
}

.clientele {
  position: relative;
  overflow: hidden
}

.marquee-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)
}

.marquee {
  display: flex;
  width: max-content;
  gap: 20px;
  animation: marquee 32s linear infinite
}

.marquee-wrap:hover .marquee {
  animation-play-state: paused
}

.client-card {
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 15px
}

.client-card strong {
  font: 700 26px Georgia
}

.client-card small {
  display: block;
  font-size: 13px;
  margin-top: 3px
}

@keyframes marquee {
  to {
    transform: translateX(-50%)
  }
}

.about {
  background: var(--brown);
  color: #fff
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center
}

.about p {
  color: rgba(255, 247, 229, .62)
}

.location-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.location-chips span {
  padding: 8px 15px;
  background: rgba(245, 169, 0, .12);
  border: 1px solid rgba(245, 169, 0, .3);
  border-radius: 999px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700
}

.about-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px
}

.about-cards .card {
  background: rgba(105, 52, 18, .28);
  border-color: rgba(245, 169, 0, .12)
}

.about-cards h3 {
  font-size: 13px
}

.about-cards p {
  font-size: 12px
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px
}

.contact-info {
  display: grid;
  gap: 22px
}

.contact-item {
  display: flex;
  gap: 15px;
  align-items: center
}

.contact-item .iconbox {
  margin: 0;
  width: 48px;
  height: 48px
}

.contact-item small {
  display: block;
  color: #8c8378
}

.contact-item strong {
  font-size: 13px;
    font-family: "Inter", sans-serif;

}
.margin-bottom-10{
  margin-bottom: 10px !important;
}

.contact-form {
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  background: #fff
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.field {
  margin-bottom: 16px
}

.field label {
  display: block;
  font-size: 12px;
  color: #82786c;
  margin-bottom: 7px
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fffdf8;
  color: #2d241d;
  font: inherit;
  outline: none;
  font-family: "Inter", sans-serif !important;
  font-size: 13px;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--primary)
}

.field textarea {
  min-height: 130px;
  resize: vertical
}

.contact-form button {
  width: 100%;
  justify-content: center;
  border: 0;
  cursor: pointer
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200
}

.modal.show {
  display: flex
}

.modal-card {
  position: relative;
  width: min(420px, 100%);
  padding: 34px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  text-align: center
}

.modal-close {
  position: absolute;
  top: 13px;
  right: 13px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer
}

.success {
  margin: auto auto 20px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(110deg, #ffd85c, #ff9f00);
  font-size: 30px
}

.footer {
  background: var(--dark);
  border-top: 1px solid rgba(245, 169, 0, .2);
  padding: 50px 0 24px;
  color: #fff
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 35px
}

.footer img {
  height: 44px
}

.footer h4 {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px
}

.footer p,
.footer li {
  font-size: 12px;
  color: rgba(255, 247, 229, .5);
  line-height: 1.7;
  font-family: "Inter", sans-serif !important;
}
.footer li {
  line-height: 2.7;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0
}

.copyright {
  border-top: 1px solid rgba(245, 169, 0, .1);
  margin-top: 35px;
  padding-top: 20px;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 247, 229, .3)
}

/* inner pages */
.inner-hero {
  padding: 145px 0 75px;
  background: var(--brown);
  color: #fff;
  position: relative;
  overflow: hidden
}

.inner-hero .pattern {
  opacity: .12
}

.inner-hero h1 {
  font-size: clamp(40px, 5vw, 60px);
  margin-bottom: 18px
}

.inner-hero p {
  max-width: 700px;
  color: rgba(255, 247, 229, .62);
  font-size: 17px
}

.back {
  display: inline-flex;
  gap: 8px;
  color: var(--primary);
  margin-bottom: 28px;
  font-size: 14px
}

.detail-card {
  background: rgba(255, 255, 255, .78)
}

.detail-card p {
  color: #81776c;
  font-size: 14px
}

.managed {
  background: var(--brown);
  color: #fff
}

.managed .card {
  background: rgba(105, 52, 18, .28);
  border-color: rgba(245, 169, 0, .12)
}

.managed .card p,
.managed li {
  color: rgba(255, 247, 229, .58)
}

.managed ul {
  padding-left: 20px
}

.cta {
  text-align: center;
  padding: 64px 0;
  background: linear-gradient(110deg, #ffd85c, #ff9f00)
}

.cta h2 {
  color: #3b2107
}

.cta p {
  color: rgba(59, 33, 7, .68);
  max-width: 560px;
  margin: 0 auto 28px
}

.cta .btn {
  background: #321708;
  color: #fff
}

.training-hero {
  background: linear-gradient(180deg, rgba(33, 16, 6, .45), #211006), url('assets/honeycomb-bg.jpg') center/cover;
  padding: 145px 0 80px;
  color: #fff
}

.training-hero h1 {
  max-width: 850px
}

.training-hero p {
  max-width: 850px;
  color: rgba(255, 247, 229, .75);
  font-size: 17px
}

.arena-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px
}

.arena {
  text-align: center
}

.arena .iconbox {
  margin: 0 auto 10px
}

.arena span {
  font-size: 12px;
  font-weight: 600
}

.virtual-card {
  background: linear-gradient(135deg, #fff9ed, #f5e2bd);
  border: 1px solid rgba(245, 169, 0, .2);
  border-radius: 17px;
  padding: 24px
}

.virtual-card h3 {
  color: #4b2a0b
}

.virtual-card ul {
  padding-left: 20px
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow)
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 780px;
  background: #fff
}

th {
  background: var(--brown);
  color: #fff7e5;
  text-align: left;
  padding: 15px;
  font: 700 12px Georgia;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: "Inter", sans-serif !important;
}

td {
  padding: 15px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-family: "Inter", sans-serif !important;
}

tr:nth-child(even) td {
  background: #fffaf0
}

.course-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px
}

.course-chip {
  padding: 9px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 700 13px Georgia
}

.cta-card {
  min-height: 180px
}

.cta-card p {
  font-size: 13px;
  color: rgba(255, 247, 229, .65)
}

.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity .7s ease, transform .7s ease
}

.reveal.visible {
  opacity: 1;
  transform: none
}

.reveal-left {
  transform: translateX(-25px)
}

.reveal-right {
  transform: translateX(25px)
}

@media(max-width:1050px) {
  .nav-links {
    gap: 14px
  }

  .nav-links .phone-pill {
    display: none
  }

  .cards-4 {
    grid-template-columns: repeat(2, 1fr)
  }

  .arena-grid {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media(max-width:800px) {
  .nav-links {
    display: none
  }

  .mobile-toggle {
    display: block
  }

  .section {
    padding: 75px 0
  }

  .cards-3,
  .cards-2,
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr
  }

  .cards-4 {
    grid-template-columns: 1fr 1fr
  }

  .about-cards {
    margin-top: 20px
  }

  .field-grid {
    grid-template-columns: 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .hero {
    min-height: 850px
  }

  .stats {
    gap: 25px
  }

  .inner-hero {
    padding-top: 125px
  }

  .arena-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:520px) {
  .container {
    width: min(var(--container), calc(100% - 22px))
  }

  .cards-4 {
    grid-template-columns: 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .hero h1 {
    font-size: 43px
  }

  .hero p {
    font-size: 16px
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center
  }

  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .stat strong {
    font-size: 19px
  }

  .client-card {
    min-width: 220px
  }

  .section-head {
    margin-bottom: 40px
  }

  .about-cards {
    grid-template-columns: 1fr
  }

  .arena-grid {
    grid-template-columns: 1fr 1fr
  }
}

/* software & applications */
.software-section {
  background: #fffdf8
}

.software-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px
}

.software-subtitle {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 22px;
  color: #3b3028
}

.software-vertical-list {
  display: grid;
  gap: 16px
}

.software-vertical {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px
}

.software-vertical:hover,
.software-horizontal:hover {
  transform: translateY(-4px)
}

.software-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 11px;
  background: linear-gradient(110deg, #ffd85c, #ff9f00);
  display: grid;
  place-items: center;
  font-size: 20px;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%)
}

.software-vertical h4 {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 15px;
  margin: 2px 0 4px
}

.software-vertical p {
  margin: 0;
  color: #81776c;
  font-size: 13px;
  line-height: 1.5
}

.software-horizontal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px
}

.software-horizontal {
  text-align: center;
  padding: 22px 18px;
  min-height: 125px
}

.software-horizontal-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  border-radius: 11px;
  background: rgba(245, 169, 0, .1);
  display: grid;
  place-items: center;
  font-size: 22px;
  transition: .25s
}

.software-horizontal:hover .software-horizontal-icon {
  background: linear-gradient(110deg, #ffd85c, #ff9f00)
}

.software-horizontal h4 {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 14px;
  margin: 0
}

.software-benefits {
  margin-top: 22px;
  padding: 24px;
  background: rgba(245, 169, 0, .055);
  border: 1px solid rgba(245, 169, 0, .2);
  border-radius: 14px
}

.software-benefits>h4 {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 13px
}

.software-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px
}

.software-benefits li {
  font-size: 13px;
  color: #82796f;
  display: flex;
  align-items: center;
  gap: 9px;
   font-family: "Inter", sans-serif;
}

.software-benefits li:before {
  content: '✓';
  color: var(--primary);
  font-weight: 700
}

.software-section .card {
  background: rgba(255, 255, 255, .78)
}

@media(max-width:900px) {
  .software-grid {
    grid-template-columns: 1fr;
    gap: 42px
  }
}

@media(max-width:600px) {
  .software-horizontal-grid {
    grid-template-columns: 1fr 1fr
  }

  .software-vertical {
    padding: 17px
  }

  .software-vertical p {
    font-size: 12px
  }
}

/* === React/Tailwind visual parity overrides === */
:root {
  --container: 1536px;
  --background: #fffdf8;
  --foreground: #2f251d;
  --secondary: #321708;
  --secondary-foreground: #fff7e5;
  --honey-light: #fff7e5;
  --honey-dark: #8b5b09;
  --muted-foreground: #81776c;
}

html,
body {
   font-family: "Orbitron", sans-serif !important;
}

body {
  font-weight: 400;
  letter-spacing: 0
}

h1,
h2,
h3,
h4,
h5,
h6,
.stat strong,
.client-card strong,
.course-chip,
.software-subtitle,
.software-vertical h4,
.software-horizontal h4,
.software-benefits>h4 {
  font-family: 'Orbitron', system-ui, sans-serif
}

.container {
  width: min(var(--container), calc(100% - 64px))
}

.section {
  padding: 96px 0
}

h1 {
  font-size: 60px;
  line-height: 1.1;
  font-weight: 700
}

h2 {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700
}

h3 {
  font-size: 16px;
  line-height: 1.3
}

.eyebrow {
  padding: 6px 16px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .16em;
  margin-bottom: 16px
}

.btn {
    font-family: "Orbitron", sans-serif;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 9px
}

.btn-gold {
  background: linear-gradient(110deg, #ffd85c, #ff9f00);
  box-shadow: 0 10px 30px rgba(245, 169, 0, .22)
}

.btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2
}

.grid {
  gap: 24px
}

.card {
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 25px rgba(76, 43, 8, .045)
}

/* Navbar exactly follows the React h-16 lg:h-20 + container px-4 lg:px-8 structure */
.navbar {
  background: rgba(33, 16, 6, .95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245, 169, 0, .2)
}

.nav-inner {
  height: 80px
}

.logo {
  height: 56px
}

.nav-links {
  gap: 32px;
font-family: "Inter", sans-serif;
  font-size: 16px
}

.nav-links>a:not(.btn):not(.phone-pill) {
  color: rgba(255, 247, 229, .8);
  font-size: 13px;
  letter-spacing: .02em
}

.nav-links>a:not(.btn):not(.phone-pill):hover {
  color: var(--primary)
}

.phone-pill {
  padding: 9px 20px;
  gap: 12px;
  background: #6a3a19;
  font-size: 14px;
  border-radius: 999px;
  font-weight: 500;
  font-family: "Inter", sans-serif !important;
}

.phone-pill .nav-icon {
  width: 18px;
  height: 18px
}

.nav-links .btn-gold {
  font-size: 16px;
  padding: 10px 20px
}

.mobile-toggle svg {
  width: 24px;
  height: 24px
}

/* Hero */
.hero {
  min-height: 100vh
}

.hero:after {
  background: rgba(33, 16, 6, .60)
}

.hero-content {
  padding-top: 80px;
  max-width: 1100px
}

.hero .eyebrow {
  margin-bottom: 24px
}

.hero h1 {
  margin-bottom: 24px
}

.hero p {
  max-width: 576px;
  font-size: 18px;
  line-height: 1.65;
  margin-bottom: 32px
}

.hero-actions {
  gap: 16px;
  margin: 0 0 64px
}

.hero-actions .btn {
  padding: 14px 28px
}

.stats {
  gap: 64px
}

.stat {
  gap: 12px
}

.stat-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(245, 169, 0, .15)
}

.stat-mark svg {
  width: 20px;
  height: 20px;
  stroke: var(--primary);
  stroke-width: 2
}

.stat strong {
  font-size: 24px;
  line-height: 1.1
}

.stat span {
  font-size: 13px;
  line-height: 1.3
}

/* Common section typography */
.section-head {
  max-width: 768px;
  margin: 0 auto 64px
}

.section-head h2 {
  margin-bottom: 16px
}

.section-head p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted-foreground)
}

/* Consultancy preview */
.consultancy {
  background: linear-gradient(135deg, #fff9ed, #f7e7c7)
}

.consultancy:before {
  opacity: .10
}

.consultancy .cards-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px
}

.service-card {
  background: rgba(255, 255, 255, .80);
  padding: 24px
}

.service-card h3 {
  font-size: 16px;
  margin-bottom: 8px
}

.service-card p {
  font-size: 14px;
  line-height: 1.6
}

.framework-strip {
  padding: 24px;
  margin-top: 48px;
  border-radius: 12px;
  background: rgba(50, 23, 8, .04)
}

.chips {
  gap: 12px
}

.chip {
  padding: 6px 12px;
  font-size: 13px
}

/* Exact icon treatment: lucide icons instead of text/emoji placeholders */
.iconbox {
  clip-path: none;
  width: 48px;
  height: 48px;
  border-radius: 9px;
  margin-bottom: 16px;
  font-size: 0
}

.iconbox svg {
  width: 22px;
  height: 22px;
  stroke-width: 2
}

.gradient-icon {
  background: linear-gradient(110deg, #ffd85c, #ff9f00);
  color: #321708
}

.gradient-icon svg {
  stroke: #321708
}

.soft-icon {
  background: rgba(245, 169, 0, .15);
  color: var(--primary)
}

.soft-icon svg {
  stroke: currentColor
}

.honeycomb-icon {
  background: linear-gradient(110deg, #ffd85c, #ff9f00);
  color: #321708;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%)
}

.honeycomb-icon svg {
  stroke: #321708
}

.service-section {
  background: #321708
}

.service-section .section-head p {
  color: rgba(255, 247, 229, .60)
}

.service-section .card {
  background: rgba(105, 52, 18, .30);
  border-color: rgba(245, 169, 0, .10)
}

.service-section .card p {
  color: rgba(255, 247, 229, .50)
}

.service-section .soft-icon {
  background: rgba(245, 169, 0, .15)
}

.digital {
  background: linear-gradient(135deg, #fff9ed, #f7e7c7)
}

.digital:before {
  opacity: .10
}

.digital .card {
  background: rgba(255, 255, 255, .60);
  backdrop-filter: blur(4px)
}

.digital .honeycomb-icon {
  margin-bottom: 16px
}

.objective {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 9px;
  font-size: 14px
}

.objective svg {
  width: 16px;
  height: 16px;
  stroke: var(--primary);
  flex: 0 0 auto
}

/* Software */
.software-section {
  background: #fffdf8
}

.software-subtitle {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .10em
}

.software-vertical {
  border-radius: 12px;
  padding: 20px
}

.software-icon {
  font-size: 0;
  clip-path: none
}

.software-icon svg {
  width: 20px;
  height: 20px;
  stroke: #321708
}

.software-horizontal-icon {
  font-size: 0
}

.software-horizontal-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--primary)
}

.software-horizontal:hover .software-horizontal-icon svg {
  stroke: #321708
}

.software-benefits>h4 {
  font-size: 12px
}

.client-card strong {
  font-size: 26px
}

.client-card .iconbox {
  margin-bottom: 0;
  width: 56px;
  height: 56px
}

.client-card .iconbox svg {
  width: 24px;
  height: 24px
}

.about {
  background: #321708
}

.about h2,
.service-section h2 {
  color: #fff7e5
}

/* Inner pages */
.inner-hero {
  padding: 112px 0 80px
}

.inner-hero h1 {
  font-size: 48px
}

.inner-hero p {
  font-size: 18px
}

.training-hero {
  padding: 112px 0 80px
}

.training-hero h1 {
  font-size: 60px
}

.training-hero p {
  font-size: 18px
}

@media(max-width:1279px) {
  .nav-links {
    gap: 22px
  }

  .nav-links>a:not(.btn):not(.phone-pill) {
    font-size: 14px
  }
}

@media(max-width:1050px) {
  .container {
    width: min(var(--container), calc(100% - 48px))
  }

  .nav-links {
    gap: 14px
  }
}

@media(max-width:800px) {
  .container {
    width: min(var(--container), calc(100% - 32px))
  }

  h1 {
    font-size: 48px
  }

  h2 {
    font-size: 34px
  }

  .nav-inner {
    height: 64px
  }

  .logo {
    height: 48px
  }

  .hero-content {
    padding-top: 80px
  }

  .hero p {
    font-size: 17px
  }
}

@media(max-width:520px) {
  .container {
    width: calc(100% - 24px)
  }

  h1,
  .hero h1 {
    font-size: 40px
  }

  h2 {
    font-size: 30px
  }
}


/* Final live-site typography parity: display/UI families */
:root {
  --font-display: 'Orbitron', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif
}

body {
  font-family: var(--font-body)
}

h1,
h2,
h3,
h4,
h5,
h6,
.stat strong,
.client-card strong,
.course-chip,
.software-subtitle,
.software-vertical h4,
.software-horizontal h4,
.software-benefits>h4,
.nav-links a {
  font-family: var(--font-display)
}

p,
span,
label,
input,
textarea,
button,
.btn,
.nav-links>a:not(.phone-pill),
.phone-pill,
.mobile-menu a,
.stat span,
.objective,
.chip {
  font-family: var(--font-body)
}

.gradient-text{
    font-family: "Orbitron", sans-serif !important;
}

.checkk li{
  font-family: "Inter", sans-serif !important;
  line-height: 2.5;

}

.new-b small{
font-family: "Inter", sans-serif !important;
  line-height: 2.5;
  display: block;
}












   .technical-skills-grid {
        max-width: 1200px;
        margin: 40px auto 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
    }

    .technical-skill-card {
        position: relative;
        padding: 30px 24px;
        min-height: 210px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        background: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(255, 248, 235, 0.96)
        );

        border-radius: 18px;
        overflow: hidden;
        isolation: isolate;

        box-shadow:
            0 10px 30px rgba(72, 38, 8, 0.08),
            inset 0 0 0 1px rgba(255, 166, 0, 0.12);

        transition:
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }

    /* Animated border */
    .technical-skill-card::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1.5px;
        border-radius: inherit;

        background: linear-gradient(
            120deg,
            transparent 10%,
            #ff8a00 30%,
            #ffc42e 50%,
            #ff8a00 70%,
            transparent 90%
        );

        background-size: 250% 250%;

        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);

        -webkit-mask-composite: xor;
        mask-composite: exclude;

        animation: technicalBorder 4s linear infinite;

        pointer-events: none;
        z-index: -1;
    }

    @keyframes technicalBorder {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    /* Soft animated glow */
    .technical-skill-card::after {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        top: -60px;
        right: -60px;

        background: radial-gradient(
            circle,
            rgba(255, 166, 0, 0.18),
            transparent 70%
        );

        border-radius: 50%;
        transition: all 0.4s ease;
        pointer-events: none;
    }

    .technical-skill-card:hover {
        transform: translateY(-8px);

        box-shadow:
            0 18px 45px rgba(255, 140, 0, 0.16),
            0 0 25px rgba(255, 166, 0, 0.08);
    }

    .technical-skill-card:hover::after {
        width: 220px;
        height: 220px;
        top: -100px;
        right: -100px;
    }

    /* Icon */
    .technical-skill-icon {
        width: 58px;
        height: 58px;
        flex-shrink: 0;

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

        border-radius: 14px;

        background: linear-gradient(
            135deg,
            #ff8a00,
            #ffb82e
        );

        color: #241508;

        box-shadow:
            0 8px 20px rgba(255, 138, 0, 0.22);

        margin-bottom: 22px;

        transition:
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }

    .technical-skill-card:hover .technical-skill-icon {
        transform: translateY(-3px) rotate(-3deg) scale(1.05);

        box-shadow:
            0 12px 28px rgba(255, 138, 0, 0.35);
    }

    .technical-skill-icon svg {
        width: 28px;
        height: 28px;
        stroke-width: 2;
    }

    /* Card text */
    .technical-skill-card h3 {
        margin: 0 0 10px;

        font-size: 17px;
        line-height: 1.35;
        font-weight: 700;

        color: #26170c;
    }

    .technical-skill-card p {
        margin: 0;

        font-size: 14px;
        line-height: 1.65;

        color: #735f50;
    }

    /* Number badge */
    .technical-skill-number {
        position: absolute;
        top: 18px;
        right: 20px;

        font-size: 12px;
        font-weight: 700;

        color: rgba(255, 138, 0, 0.55);
    }

    /* Tablet */
    @media (max-width: 1050px) {
        .technical-skills-grid {
            grid-template-columns: repeat(2, 1fr);
            padding: 0 24px;
        }
    }

    /* Mobile */
    @media (max-width: 600px) {
        .technical-skills-grid {
            grid-template-columns: 1fr;
            gap: 18px;
            padding: 0 16px;
        }

        .technical-skill-card {
            min-height: auto;
            padding: 25px 21px;
        }
    }