/* ============================================================
   QORONEX LTD — Complete Design System
   css/styles.css
   ============================================================ */


/* ============================================================
   SECTION 1 — Google Fonts Import + CSS Variables
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;600;800&family=Rajdhani:wght@400;700&family=Space+Mono:wght@400&display=swap');

:root {
  /* Brand Colours */
  --qx-black:       #0A0A0F;
  --qx-surface:     #10101A;
  --qx-surface-2:   #16162A;
  --qx-border:      #1E1E35;
  --qx-gold:        #FFB800;
  --qx-gold-mid:    #D4A017;
  --qx-gold-deep:   #B8860B;
  --qx-gold-glow:   rgba(255, 184, 0, 0.07);
  --qx-blue:        #00A3FF;
  --qx-blue-bright: #00BFFF;
  --qx-blue-glow:   rgba(0, 163, 255, 0.08);
  --qx-silver:      #C0C0C8;
  --qx-silver-dim:  #888899;
  --qx-white:       #F0F0F8;
  --qx-faint:       #3A3A55;

  /* Typography Scale */
  --fs-hero:  clamp(44px, 7vw, 72px);
  --fs-h2:    clamp(30px, 4vw, 48px);
  --fs-h3:    clamp(22px, 2.5vw, 32px);
  --fs-h4:    20px;
  --fs-body:  17px;
  --fs-small: 14px;
  --fs-label: 12px;

  /* Spacing */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  40px;
  --sp-xl:  64px;
  --sp-2xl: 96px;
  --sp-3xl: 128px;

  /* Transitions */
  --ease:      0.2s ease;
  --ease-slow: 0.6s ease;
}


/* ============================================================
   SECTION 2 — Reset + Base
   ============================================================ */

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

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

ul,
ol {
  list-style: none;
}

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

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

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

body {
  background:   var(--qx-black);
  color:         var(--qx-white);
  font-family:   'Exo 2', sans-serif;
  font-weight:   300;
  line-height:   1.7;
  min-height:    100vh;
  overflow-x:    hidden;
}

::selection {
  background: rgba(255, 184, 0, 0.145);
  color:      var(--qx-gold);
}

h1, h2, h3, h4, h5, h6 {
  line-height:  1.15;
  font-family:  'Exo 2', sans-serif;
}


/* ============================================================
   SECTION 3 — Navigation (.nav)
   ============================================================ */

.nav {
  position:          fixed;
  top:               0;
  left:              0;
  right:             0;
  height:            64px;
  z-index:           1000;
  background:        rgba(10, 10, 15, 0.88);
  backdrop-filter:   blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom:     1px solid var(--qx-border);
}

.nav-inner {
  max-width:       1200px;
  margin:          0 auto;
  padding:         0 40px;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

/* Logo */
.nav-logo {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  z-index:     1001;
}

.nav-logo-img {
  max-height: 40px;
  width:      auto;
  display:    block;
}

/* Nav Links */
.nav-links {
  display:     flex;
  align-items: center;
  gap:         32px;
}

.nav-links a {
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       13px;
  text-transform:  uppercase;
  letter-spacing:  0.12em;
  color:           var(--qx-silver-dim);
  transition:      color var(--ease), border-bottom var(--ease);
  padding-bottom:  2px;
  border-bottom:   1px solid transparent;
}

.nav-links a:hover,
.nav-links a.active {
  color:         var(--qx-silver);
  border-bottom: 1px solid rgba(255, 184, 0, 0.376);
}

/* Nav CTA */
.nav-cta {
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       13px;
  text-transform:  uppercase;
  letter-spacing:  0.12em;
  color:           var(--qx-gold);
  border:          1px solid rgba(255, 184, 0, 0.376);
  padding:         8px 20px;
  border-radius:   2px;
  background:      transparent;
  cursor:          pointer;
  transition:      background var(--ease), border-color var(--ease);
  white-space:     nowrap;
  display:         inline-block;
}

.nav-cta:hover {
  background:    var(--qx-gold-glow);
  border-color:  var(--qx-gold);
  color:         var(--qx-gold);
}

/* Hamburger */
.hamburger {
  display:        none;
  flex-direction: column;
  justify-content: center;
  gap:            5px;
  width:          44px;
  height:         44px;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        8px;
  z-index:        1001;
  flex-shrink:    0;
}

.hamburger span {
  display:          block;
  width:            22px;
  height:           2px;
  background:       var(--qx-silver);
  border-radius:    1px;
  transition:       transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity:   0;
  transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Nav Overlay */
.nav-mobile {
  display:          none;
  position:         fixed;
  top:              0;
  left:             0;
  right:            0;
  bottom:           0;
  background:       rgba(10, 10, 15, 0.98);
  z-index:          999;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              8px;
  transform:        translateX(100%);
  transition:       transform 0.35s ease;
}

.nav-mobile.nav-open {
  transform: translateX(0);
}

.nav-mobile a {
  font-family:    'Rajdhani', sans-serif;
  font-weight:    700;
  font-size:      24px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--qx-silver-dim);
  padding:        12px 0;
  transition:     color var(--ease);
  width:          100%;
  text-align:     center;
}

.nav-mobile a:hover {
  color: var(--qx-white);
}

.nav-mobile .nav-cta-mobile {
  margin-top:   24px;
  font-family:  'Rajdhani', sans-serif;
  font-weight:  700;
  font-size:    14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:        var(--qx-gold);
  border:       1px solid rgba(255, 184, 0, 0.376);
  padding:      12px 32px;
  border-radius: 2px;
  display:      inline-block;
}

/* Responsive Nav */
@media (max-width: 768px) {
  .nav-inner {
    padding: 0 24px;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .nav-mobile {
    display: flex;
  }
}


/* Nav scrolled state (added by JS after 40px scroll) */
.nav.nav-scrolled {
  background: rgba(10, 10, 15, 0.97);
}

/* ============================================================
   SECTION 4 — Hero (.hero)
   ============================================================ */

.hero {
  min-height:   100vh;
  display:      flex;
  align-items:  center;
  position:     relative;
  overflow:     hidden;
  padding-top:  64px;
  background-color: var(--qx-black);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cellipse cx='100' cy='100' rx='80' ry='35' fill='none' stroke='%2300A3FF' stroke-width='0.5' opacity='0.15' transform='rotate(45 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='80' ry='35' fill='none' stroke='%2300A3FF' stroke-width='0.5' opacity='0.15' transform='rotate(-45 100 100)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size:   200px 200px;
}

.hero-inner {
  max-width: 1200px;
  margin:    0 auto;
  padding:   80px 40px 80px;
  width:     100%;
}

.hero-eyebrow {
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       var(--fs-label);
  text-transform:  uppercase;
  letter-spacing:  0.2em;
  color:           var(--qx-gold);
  margin-bottom:   20px;
  display:         block;
}

.hero-title {
  font-family:     'Exo 2', sans-serif;
  font-weight:     800;
  font-size:       var(--fs-hero);
  line-height:     1.05;
  color:           var(--qx-white);
  max-width:       860px;
  letter-spacing:  -0.01em;
}

.hero-title .gold {
  color: var(--qx-gold);
}

.hero-subtitle {
  font-family:  'Exo 2', sans-serif;
  font-weight:  300;
  font-size:    19px;
  color:        var(--qx-silver-dim);
  max-width:    560px;
  margin-top:   20px;
  line-height:  1.65;
}

.hero-cta-group {
  display:      flex;
  flex-direction: row;
  flex-wrap:    wrap;
  gap:          16px;
  margin-top:   40px;
}

/* Primary Button */
.btn-primary {
  background:      linear-gradient(135deg, var(--qx-gold), var(--qx-gold-mid));
  color:           var(--qx-black);
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       13px;
  text-transform:  uppercase;
  letter-spacing:  0.12em;
  padding:         14px 32px;
  border-radius:   2px;
  border:          none;
  cursor:          pointer;
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  transition:      filter var(--ease), transform var(--ease);
  white-space:     nowrap;
  min-height:      44px;
}

.btn-primary:hover {
  filter:    brightness(1.1);
  transform: translateY(-1px);
  color:     var(--qx-black);
}

/* Secondary Button */
.btn-secondary {
  background:      transparent;
  color:           var(--qx-silver);
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       13px;
  text-transform:  uppercase;
  letter-spacing:  0.12em;
  padding:         14px 32px;
  border-radius:   2px;
  border:          1px solid var(--qx-border);
  cursor:          pointer;
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  transition:      border-color var(--ease), color var(--ease);
  white-space:     nowrap;
  min-height:      44px;
}

.btn-secondary:hover {
  border-color: rgba(0, 163, 255, 0.267);
  color:        var(--qx-white);
}

/* Scroll Hint */
.scroll-hint {
  position:    absolute;
  bottom:      32px;
  left:        50%;
  transform:   translateX(-50%);
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         6px;
  color:       rgba(255, 184, 0, 0.376);
  animation:   scrollBob 2s ease-in-out infinite;
}

.scroll-hint svg {
  width:  20px;
  height: 20px;
}

@keyframes scrollBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* Hero Responsive */
@media (max-width: 768px) {
  .hero-inner {
    padding: 80px 24px 60px;
  }

  .hero-cta-group {
    flex-direction:  column;
    align-items:     flex-start;
  }

  .hero-cta-group .btn-primary,
  .hero-cta-group .btn-secondary {
    width:       100%;
    justify-content: center;
  }
}


/* ============================================================
   SECTION 5 — Sections (.section)
   ============================================================ */

.section {
  padding: var(--sp-3xl) 0;
}

.section-inner {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 40px;
}

.section-dark {
  background: #07070E;
}

.section-eyebrow {
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       var(--fs-label);
  text-transform:  uppercase;
  letter-spacing:  0.2em;
  color:           var(--qx-gold);
  margin-bottom:   16px;
  display:         block;
}

.section-title {
  font-family:   'Exo 2', sans-serif;
  font-weight:   600;
  font-size:     var(--fs-h2);
  line-height:   1.1;
  color:         var(--qx-white);
  max-width:     700px;
}

.section-subtitle {
  font-family:  'Exo 2', sans-serif;
  font-weight:  300;
  font-size:    18px;
  color:        var(--qx-silver-dim);
  max-width:    540px;
  margin-top:   16px;
  line-height:  1.65;
}

.section-header {
  margin-bottom: var(--sp-xl);
}

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

@media (max-width: 768px) {
  .section {
    padding: 80px 0;
  }

  .section-inner {
    padding: 0 24px;
  }
}


/* ============================================================
   SECTION 6 — Cards (.card)
   ============================================================ */

.card {
  background:    var(--qx-surface);
  border:        1px solid var(--qx-border);
  border-radius: 2px;
  padding:       32px;
  transition:    border-color 0.3s ease, transform 0.3s ease;
}

.card:hover {
  border-color: rgba(255, 184, 0, 0.251);
  transform:    translateY(-2px);
}

.card-icon {
  width:         40px;
  height:        40px;
  margin-bottom: 20px;
  color:         var(--qx-blue);
  flex-shrink:   0;
}

.card-icon svg {
  width:  40px;
  height: 40px;
}

.card-eyebrow {
  font-family:    'Rajdhani', sans-serif;
  font-weight:    700;
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color:          var(--qx-gold);
  margin-bottom:  8px;
  display:        block;
}

.card-title {
  font-family:   'Exo 2', sans-serif;
  font-weight:   600;
  font-size:     var(--fs-h4);
  color:         var(--qx-white);
  margin-bottom: 12px;
  line-height:   1.3;
}

.card-body {
  font-family:  'Exo 2', sans-serif;
  font-weight:  300;
  font-size:    16px;
  color:        var(--qx-silver-dim);
  line-height:  1.65;
}

.card-link {
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       13px;
  text-transform:  uppercase;
  letter-spacing:  0.1em;
  color:           var(--qx-blue);
  margin-top:      20px;
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  transition:      color var(--ease);
}

.card-link:hover {
  color: var(--qx-blue-bright);
}

.card-link:hover .arrow {
  transform: translateX(4px);
}

.card-link .arrow {
  display:    inline-block;
  transition: transform var(--ease);
}

/* Feature Card Variant */
.card-feature {
  background:    var(--qx-surface);
  border:        1px solid var(--qx-border);
  border-radius: 2px;
  padding:       32px;
  transition:    border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.card-feature:hover {
  border-color: rgba(255, 184, 0, 0.251);
  background:   var(--qx-surface-2);
  transform:    translateY(-2px);
}

/* Price Card Variant */
.card-price {
  background:    var(--qx-surface);
  border:        1px solid var(--qx-border);
  border-radius: 2px;
  padding:       40px 32px;
  transition:    border-color 0.3s ease;
}

.card-price:hover {
  border-color: rgba(255, 184, 0, 0.376);
}

.card-price-featured {
  border-color: rgba(255, 184, 0, 0.376);
  background:   var(--qx-surface-2);
}


/* ============================================================
   SECTION 7 — Grid Layouts
   ============================================================ */

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

.grid-3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
}

.grid-4 {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   20px;
}

@media (max-width: 1200px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   SECTION 8 — Stat Counters (.stat)
   ============================================================ */

.stat {
  text-align: center;
  padding:    24px 16px;
}

.stat-number {
  font-family:  'Exo 2', sans-serif;
  font-weight:  800;
  font-size:    52px;
  line-height:  1;
  background:   linear-gradient(135deg, var(--qx-gold), var(--qx-gold-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
  display:      inline-block;
}

.stat-label {
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       var(--fs-label);
  text-transform:  uppercase;
  letter-spacing:  0.15em;
  color:           var(--qx-silver-dim);
  margin-top:      8px;
  display:         block;
}

.stat-suffix {
  font-family:  'Exo 2', sans-serif;
  font-weight:  800;
  font-size:    52px;
  line-height:  1;
  background:   linear-gradient(135deg, var(--qx-gold), var(--qx-gold-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}


/* ============================================================
   SECTION 9 — Tags (.tag)
   ============================================================ */

.tag {
  display:         inline-block;
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       11px;
  text-transform:  uppercase;
  letter-spacing:  0.12em;
  padding:         4px 10px;
  border-radius:   1px;
  line-height:     1.5;
}

.tag-gold {
  background: rgba(255, 184, 0, 0.082);
  color:      var(--qx-gold);
  border:     1px solid rgba(255, 184, 0, 0.188);
}

.tag-blue {
  background: rgba(0, 163, 255, 0.071);
  color:      var(--qx-blue);
  border:     1px solid rgba(0, 163, 255, 0.145);
}

.tag-silver {
  background: rgba(192, 192, 200, 0.082);
  color:      var(--qx-silver);
  border:     1px solid rgba(192, 192, 200, 0.145);
}

.tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}


/* ============================================================
   SECTION 10 — Terminal / Code Block (.terminal)
   ============================================================ */

.terminal {
  background:     #06060C;
  border:         1px solid var(--qx-border);
  border-radius:  2px;
  padding:        24px;
  overflow-x:     auto;
  font-size:      0;
}

.terminal-chrome {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 20px;
}

.terminal-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    #333345;
  flex-shrink:   0;
}

.terminal-title {
  font-family:    'Rajdhani', sans-serif;
  font-weight:    700;
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--qx-faint);
  margin-left:    8px;
}

.terminal-content {
  font-family:  'Space Mono', monospace;
  font-weight:  400;
  font-size:    13px;
  color:        var(--qx-blue);
  line-height:  1.8;
  white-space:  pre-wrap;
  word-break:   break-word;
}

.terminal-content p,
.terminal-content div {
  font-family:  'Space Mono', monospace;
  font-size:    13px;
  line-height:  1.8;
  white-space:  pre-wrap;
}

.t-gold     { color: var(--qx-gold); }
.t-white    { color: var(--qx-white); }
.t-dim      { color: var(--qx-silver-dim); }
.t-blue     { color: var(--qx-blue); }
.t-critical { color: #C84040; }
.t-bright   { color: var(--qx-blue-bright); }


/* ============================================================
   SECTION 11 — Paper / Download Cards (.paper-card)
   ============================================================ */

.paper-card {
  display:       flex;
  gap:           32px;
  border-left:   2px solid var(--qx-gold);
  padding-left:  24px;
  padding-top:   8px;
  padding-bottom: 8px;
  transition:    border-color var(--ease);
}

.paper-card:hover {
  border-left-color: var(--qx-gold-mid);
}

.paper-meta {
  flex:        0 0 30%;
  min-width:   0;
  display:     flex;
  flex-direction: column;
  gap:         8px;
  padding-top: 4px;
}

.paper-meta-date {
  font-family:    'Rajdhani', sans-serif;
  font-weight:    700;
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--qx-silver-dim);
}

.paper-meta-venue {
  font-family:    'Rajdhani', sans-serif;
  font-weight:    700;
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--qx-faint);
}

.paper-content {
  flex: 1;
  min-width: 0;
}

.paper-title {
  font-family:  'Exo 2', sans-serif;
  font-weight:  600;
  font-size:    18px;
  color:        var(--qx-white);
  line-height:  1.3;
}

.paper-title a {
  transition: color var(--ease);
}

.paper-title a:hover {
  color: var(--qx-gold);
}

.paper-authors {
  font-family:  'Exo 2', sans-serif;
  font-weight:  300;
  font-size:    var(--fs-small);
  color:        var(--qx-silver-dim);
  margin-top:   4px;
}

.paper-abstract {
  font-family:           'Exo 2', sans-serif;
  font-weight:           300;
  font-size:             15px;
  color:                 var(--qx-silver-dim);
  margin-top:            12px;
  line-height:           1.6;
  display:               -webkit-box;
  -webkit-line-clamp:    3;
  -webkit-box-orient:    vertical;
  overflow:              hidden;
}

.btn-download {
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       12px;
  text-transform:  uppercase;
  letter-spacing:  0.12em;
  color:           var(--qx-gold);
  border:          1px solid rgba(255, 184, 0, 0.376);
  padding:         8px 16px;
  border-radius:   2px;
  margin-top:      16px;
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      transparent;
  cursor:          pointer;
  transition:      background var(--ease), border-color var(--ease);
  min-height:      36px;
}

.btn-download:hover {
  background:   var(--qx-gold-glow);
  border-color: var(--qx-gold);
  color:        var(--qx-gold);
}

.paper-list {
  display:        flex;
  flex-direction: column;
  gap:            40px;
}

@media (max-width: 640px) {
  .paper-card {
    flex-direction: column;
    gap:            16px;
  }

  .paper-meta {
    flex:      unset;
    flex-direction: row;
    flex-wrap: wrap;
    gap:       8px;
    align-items: center;
  }
}


/* ============================================================
   SECTION 12 — Contact Form (.form)
   ============================================================ */

.form-group {
  margin-bottom: 24px;
}

.form-label {
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       var(--fs-label);
  text-transform:  uppercase;
  letter-spacing:  0.12em;
  color:           var(--qx-silver-dim);
  display:         block;
  margin-bottom:   8px;
}

.form-input,
.form-textarea,
.form-select {
  width:         100%;
  background:    var(--qx-surface);
  border:        1px solid var(--qx-border);
  color:         var(--qx-white);
  padding:       14px 16px;
  font-family:   'Exo 2', sans-serif;
  font-weight:   300;
  font-size:     16px;
  border-radius: 2px;
  outline:       none;
  transition:    border-color var(--ease), box-shadow var(--ease);
  display:       block;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--qx-faint);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: rgba(255, 184, 0, 0.376);
  box-shadow:   0 0 0 3px rgba(255, 184, 0, 0.031);
}

.form-input.error,
.form-textarea.error,
.form-select.error {
  border-color: #C84040;
}

.form-error-text {
  font-family:  'Exo 2', sans-serif;
  font-weight:  300;
  font-size:    13px;
  color:        #C84040;
  margin-top:   6px;
  display:      block;
}

.form-textarea {
  resize:     vertical;
  min-height: 140px;
}

.form-select {
  appearance:  none;
  -webkit-appearance: none;
  cursor:      pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888899' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 16px center;
  padding-right:       40px;
}

.form-select option {
  background: var(--qx-surface);
  color:      var(--qx-white);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.btn-submit {
  background:      linear-gradient(135deg, var(--qx-gold), var(--qx-gold-mid));
  color:           var(--qx-black);
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       14px;
  text-transform:  uppercase;
  letter-spacing:  0.12em;
  padding:         16px 32px;
  border-radius:   2px;
  border:          none;
  cursor:          pointer;
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  min-height:      52px;
  transition:      filter var(--ease), transform var(--ease);
}

.btn-submit:hover {
  filter:    brightness(1.1);
  transform: translateY(-1px);
}

.btn-submit:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
  transform: none;
}

.form-success {
  display:        none;
  text-align:     center;
  padding:        48px 32px;
  border:         1px solid rgba(255, 184, 0, 0.2);
  border-radius:  2px;
  background:     var(--qx-surface);
}

.form-success.visible {
  display: block;
}

.form-success-title {
  font-family:  'Exo 2', sans-serif;
  font-weight:  600;
  font-size:    24px;
  color:        var(--qx-white);
  margin-bottom: 12px;
}

.form-success-body {
  font-family:  'Exo 2', sans-serif;
  font-weight:  300;
  font-size:    16px;
  color:        var(--qx-silver-dim);
}


/* ============================================================
   SECTION 13 — Footer (.footer)
   ============================================================ */

.footer {
  background:   #06060C;
  border-top:   1px solid var(--qx-border);
  padding:      60px 0 40px;
}

.footer-inner {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 40px;
}

.footer-logo-img {
  max-height: 48px;
  width:      auto;
  display:    block;
  margin-bottom: 20px;
}

.footer-tagline {
  font-family:  'Exo 2', sans-serif;
  font-weight:  300;
  font-size:    15px;
  color:        var(--qx-silver-dim);
  line-height:  1.6;
  max-width:    280px;
  margin-bottom: 8px;
}

.footer-location {
  font-family:    'Rajdhani', sans-serif;
  font-weight:    700;
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--qx-faint);
  margin-top:     12px;
}

.footer-col-title {
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       var(--fs-label);
  text-transform:  uppercase;
  letter-spacing:  0.15em;
  color:           var(--qx-silver-dim);
  margin-bottom:   20px;
  display:         block;
}

.footer-links {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.footer-links a {
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       12px;
  text-transform:  uppercase;
  letter-spacing:  0.1em;
  color:           var(--qx-silver-dim);
  transition:      color var(--ease);
}

.footer-links a:hover {
  color: var(--qx-silver);
}

.footer-social {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.footer-social a {
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       12px;
  text-transform:  uppercase;
  letter-spacing:  0.1em;
  color:           var(--qx-silver-dim);
  transition:      color var(--ease);
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
}

.footer-social a:hover {
  color: var(--qx-silver);
}

.footer-bottom {
  border-top:  1px solid var(--qx-border);
  margin-top:  40px;
  padding-top: 24px;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         12px;
}

.footer-copyright {
  font-family:  'Exo 2', sans-serif;
  font-weight:  300;
  font-size:    13px;
  color:        var(--qx-faint);
}

.footer-legal {
  display:     flex;
  align-items: center;
  gap:         20px;
}

.footer-legal a {
  font-family:  'Exo 2', sans-serif;
  font-weight:  300;
  font-size:    13px;
  color:        var(--qx-faint);
  transition:   color var(--ease);
}

.footer-legal a:hover {
  color: var(--qx-silver-dim);
}

@media (max-width: 768px) {
  .footer-inner {
    padding: 0 24px;
  }

  .footer-inner .grid-3 {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
  }
}


/* ============================================================
   SECTION 14 — Scroll Animations
   ============================================================ */

.fade-in {
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible {
  opacity:   1;
  transform: translateY(0);
}

.fade-in-delay-1 {
  transition-delay: 0.1s;
}

.fade-in-delay-2 {
  transition-delay: 0.2s;
}

.fade-in-delay-3 {
  transition-delay: 0.3s;
}


/* ============================================================
   SECTION 15 — Utility Classes
   ============================================================ */

/* Text Colours */
.text-gold   { color: var(--qx-gold); }
.text-blue   { color: var(--qx-blue); }
.text-silver { color: var(--qx-silver); }
.text-muted  { color: var(--qx-silver-dim); }
.text-white  { color: var(--qx-white); }

/* Text Alignment */
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Margin Top */
.mt-sm { margin-top: 16px; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 40px; }
.mt-xl { margin-top: 64px; }

/* Margin Bottom */
.mb-sm { margin-bottom: 16px; }
.mb-md { margin-bottom: 24px; }
.mb-lg { margin-bottom: 40px; }
.mb-xl { margin-bottom: 64px; }

/* Padding Top */
.pt-sm { padding-top: 16px; }
.pt-md { padding-top: 24px; }
.pt-lg { padding-top: 40px; }

/* Display */
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.gap-sm        { gap: 16px; }
.gap-md        { gap: 24px; }
.gap-lg        { gap: 40px; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }

/* Monospace */
.mono {
  font-family: 'Space Mono', monospace;
  font-size:   13px;
  color:       var(--qx-blue);
}

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

/* Separator dot */
.sep {
  color:  var(--qx-faint);
  margin: 0 8px;
}

/* Full-width */
.w-full { width: 100%; }

/* Max width containers */
.max-560 { max-width: 560px; }
.max-700 { max-width: 700px; }
.max-860 { max-width: 860px; }

/* Highlight bar (used in service pages) */
.highlight-bar {
  display:       flex;
  align-items:   flex-start;
  gap:           20px;
  padding:       24px;
  background:    var(--qx-gold-glow);
  border:        1px solid rgba(255, 184, 0, 0.1);
  border-radius: 2px;
  border-left:   3px solid var(--qx-gold);
}

.highlight-bar-icon {
  color:       var(--qx-gold);
  flex-shrink: 0;
  margin-top:  2px;
}

.highlight-bar-text {
  font-family:  'Exo 2', sans-serif;
  font-weight:  300;
  font-size:    15px;
  color:        var(--qx-silver);
  line-height:  1.6;
}

/* Process step indicator */
.step-number {
  font-family:    'Exo 2', sans-serif;
  font-weight:    800;
  font-size:      40px;
  line-height:    1;
  color:          var(--qx-border);
  display:        block;
  margin-bottom:  12px;
}

/* Inline code snippet */
code {
  font-family:   'Space Mono', monospace;
  font-size:     0.85em;
  color:         var(--qx-blue);
  background:    rgba(0, 163, 255, 0.071);
  padding:       2px 6px;
  border-radius: 1px;
  border:        1px solid rgba(0, 163, 255, 0.12);
}

/* Blue glow accent block */
.accent-block {
  background:    var(--qx-blue-glow);
  border:        1px solid rgba(0, 163, 255, 0.12);
  border-radius: 2px;
  padding:       24px;
}

/* Two-column layout with sidebar */
.layout-content-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

@media (max-width: 1024px) {
  .layout-content-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Sticky sidebar */
.sticky-sidebar {
  position: sticky;
  top: 88px;
}

/* Inline icon + text pairing */
.icon-text {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
}

/* Number list */
.number-list {
  counter-reset: items;
  display:       flex;
  flex-direction: column;
  gap:           16px;
}

.number-list li {
  counter-increment: items;
  display:           flex;
  gap:               16px;
  align-items:       flex-start;
}

.number-list li::before {
  content:         counter(items, decimal-leading-zero);
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       12px;
  color:           var(--qx-gold);
  letter-spacing:  0.1em;
  flex-shrink:     0;
  margin-top:      4px;
  min-width:       24px;
}

/* Subtle gradient divider */
.gradient-divider {
  height:     1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--qx-border) 20%,
    var(--qx-border) 80%,
    transparent
  );
  border: none;
  margin: 0;
}

/* Page header (used on inner pages) */
.page-header {
  padding-top:    calc(64px + 60px);
  padding-bottom: 60px;
  background:     var(--qx-black);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cellipse cx='100' cy='100' rx='80' ry='35' fill='none' stroke='%2300A3FF' stroke-width='0.5' opacity='0.08' transform='rotate(45 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='80' ry='35' fill='none' stroke='%2300A3FF' stroke-width='0.5' opacity='0.08' transform='rotate(-45 100 100)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size:   200px 200px;
  border-bottom:  1px solid var(--qx-border);
}

.page-header-inner {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 40px;
}

@media (max-width: 768px) {
  .page-header {
    padding-top:    calc(64px + 40px);
    padding-bottom: 40px;
  }

  .page-header-inner {
    padding: 0 24px;
  }
}

/* Price / engagement badge */
.price-badge {
  font-family:  'Exo 2', sans-serif;
  font-weight:  800;
  font-size:    28px;
  color:        var(--qx-white);
  line-height:  1.1;
}

.price-badge .price-from {
  font-family:  'Rajdhani', sans-serif;
  font-weight:  700;
  font-size:    12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:        var(--qx-silver-dim);
  display:      block;
  margin-bottom: 4px;
}

/* CTA section block */
.cta-block {
  background:    var(--qx-surface);
  border:        1px solid var(--qx-border);
  border-radius: 2px;
  padding:       48px;
  text-align:    center;
}

.cta-block-gold {
  border-color:  rgba(255, 184, 0, 0.2);
  background:    linear-gradient(
    135deg,
    rgba(255, 184, 0, 0.04) 0%,
    transparent 60%
  );
}

@media (max-width: 768px) {
  .cta-block {
    padding: 32px 24px;
  }
}

/* FAQ accordion */
.faq-item {
  border-bottom: 1px solid var(--qx-border);
}

.faq-item:first-child {
  border-top: 1px solid var(--qx-border);
}

.faq-question {
  width:        100%;
  text-align:   left;
  background:   none;
  border:       none;
  cursor:       pointer;
  padding:      20px 0;
  display:      flex;
  align-items:  center;
  justify-content: space-between;
  gap:          16px;
}

.faq-question-text {
  font-family:  'Exo 2', sans-serif;
  font-weight:  600;
  font-size:    var(--fs-h4);
  color:        var(--qx-white);
  line-height:  1.3;
}

.faq-icon {
  color:       var(--qx-gold);
  flex-shrink: 0;
  transition:  transform 0.3s ease;
  font-size:   20px;
  line-height: 1;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height:  0;
  overflow:    hidden;
  transition:  max-height 0.4s ease;
}

.faq-answer-inner {
  padding-bottom: 20px;
}

.faq-answer-inner p {
  font-family:  'Exo 2', sans-serif;
  font-weight:  300;
  font-size:    var(--fs-body);
  color:        var(--qx-silver-dim);
  line-height:  1.7;
}

.faq-item.open .faq-answer {
  max-height: 400px;
}

/* ============================================================
   END OF QORONEX DESIGN SYSTEM
   ============================================================ */