/* ==========================================================================
   Bitchief — home page.

   Lifted from the inline <style> block that lived in index.php. Three rule sets
   were dropped in the move because they conflicted with brand.css:

     :root   redeclared the brand palette (--primary: #00a859 and friends),
             making the home page a competing source of truth for the tokens.
     *       a global margin/padding/box-sizing reset that ran after Bootstrap
             had loaded, stripping Bootstrap's own spacing.
     body    font, colour and overflow rules, now owned by brand.css.

   Everything visual is unchanged: the same hero treatment, animated background
   and card styling, now cacheable and unable to override page CSS by virtue of
   appearing later in the document.

   Depends on the tokens in brand.css, which must load first.
   ========================================================================== */

/* ===== ULTRA PREMIUM HERO ===== */
    /* No background and no decoration of its own. Both the gradient and the
       animated field are site-wide now and both are fixed; a second copy here
       would scroll against the fixed one and visibly slide out of register.
       What is left is the hero's shape -- it is tall, and it centres its
       content. */
    .hero-ultra {
      position: relative;
      min-height: 92vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      perspective: 1000px;
    }

/* The animated field that used to live here -- cubes, waves, orbs, the hex mesh,
   the perspective grid and the particles -- is now the whole site's, in
   brand.css under .bts-backdrop, rendered once by
   includes/partials/backdrop.php and fixed behind every page. It was only ever
   absent from interior pages because it was scoped to this hero. */

/* Hero Container */
    .hero-wrap {
      position: relative;
      z-index: 10;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 100px 40px 40px;
    }

/* Ultra Title with 3D Effect */
    .title-ultra {
      font-size: clamp(42px, 7vw, 64px);
      font-weight: 900;
      color: var(--white);
      line-height: 1.1;
      margin-bottom: 18px;
      letter-spacing: -0.04em;
      text-shadow: 
        0 0 20px rgba(0, 255, 157, 0.3),
        0 5px 15px rgba(0, 0, 0, 0.4);
      animation: title-entrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

@keyframes title-entrance {
      0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

/* The gradient is static now.
   It used to shift across the word on a 4s loop. background-position is a paint
   property, and on an element that is both background-clip: text and carries a
   drop-shadow, each frame meant re-rasterising the text mask and re-running a
   20px blur over it -- on the largest text on the page, forever, whether or not
   anyone was scrolling. The gradient and the glow are both still here; only the
   movement is gone. */
.text-gradient-ultra {
      background: linear-gradient(135deg, var(--primary-glow) 0%, var(--primary-light) 50%, var(--primary) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
      display: inline-block;
      filter: drop-shadow(0 0 20px rgba(0, 255, 157, 0.4));
    }

/* Description with Fade */
    .desc-ultra {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
      max-width: 620px;
      margin-bottom: 28px;
      line-height: 1.7;
      font-weight: 400;
      animation: desc-fade 1s ease-out 0.3s both;
    }

@keyframes desc-fade {
      0% {
        opacity: 0;
        transform: translateY(30px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

/* Feature Pills Advanced */
    .pills-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 28px;
      animation: pills-appear 1s ease-out 0.6s both;
    }

@keyframes pills-appear {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

.pill-ultra {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      background: rgba(0, 255, 157, 0.08);
      border: 1.5px solid rgba(0, 255, 157, 0.25);
      border-radius: 35px;
      color: var(--primary-glow);
      font-size: 13px;
      font-weight: 600;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

.pill-ultra::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(0, 255, 157, 0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }

.pill-ultra:hover::before {
      width: 300px;
      height: 300px;
    }

.pill-ultra:hover {
      background: rgba(0, 255, 157, 0.15);
      border-color: var(--primary-glow);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0, 255, 157, 0.3);
    }

.pill-ultra i {
      font-size: 18px;
      position: relative;
      z-index: 1;
      transition: transform 0.3s;
    }

.pill-ultra:hover i {
      transform: scale(1.2) rotate(10deg);
    }

.pill-ultra span {
      position: relative;
      z-index: 1;
    }

/* Premium Buttons */
    .buttons-ultra {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 40px;
      animation: buttons-slide 1s ease-out 0.9s both;
    }

@keyframes buttons-slide {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

.btn-ultra-primary,
    .btn-ultra-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 32px;
      border-radius: 45px;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    /* Bright fill, dark label, matching .bts-btn--primary. White on this green
       measured 2.28:1, well below AA; inverted it is 13.6:1. */
    .btn-ultra-primary {
      background: linear-gradient(135deg, var(--primary-glow) 0%, #00d97d 100%);
      color: #06121f;
      font-weight: 800;
      box-shadow: 0 10px 30px rgba(0, 255, 157, 0.28);
    }

.btn-ultra-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #7dffc6 0%, var(--primary-glow) 100%);
      opacity: 0;
      transition: opacity 0.4s;
    }

.btn-ultra-primary:hover::before {
      opacity: 1;
    }

.btn-ultra-primary::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }

.btn-ultra-primary:hover::after {
      width: 400px;
      height: 400px;
    }

.btn-ultra-primary:hover {
      transform: translateY(-4px);
      box-shadow: 0 15px 40px rgba(0, 168, 89, 0.6);
    }

.btn-ultra-primary span,
    .btn-ultra-primary i {
      position: relative;
      z-index: 1;
    }

.btn-ultra-primary:hover i {
      transform: translateX(5px);
    }

.btn-ultra-secondary {
      background: rgba(255, 255, 255, 0.08);
      color: var(--white);
      border: 2px solid rgba(255, 255, 255, 0.2);
    }

.btn-ultra-secondary::before {
      content: '';
      position: absolute;
      inset: -2px;
      background: linear-gradient(135deg, var(--primary-glow), var(--primary));
      border-radius: 45px;
      opacity: 0;
      z-index: -1;
      transition: opacity 0.4s;
    }

.btn-ultra-secondary:hover::before {
      opacity: 1;
    }

.btn-ultra-secondary:hover {
      border-color: transparent;
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0, 255, 157, 0.4);
    }

/* Stats Grid Ultra */
    .stats-ultra {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      max-width: 650px;
      animation: stats-reveal 1s ease-out 1.2s both;
    }

@keyframes stats-reveal {
      0% {
        opacity: 0;
        transform: translateY(30px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

.stat-ultra {
      text-align: center;
      padding: 16px 14px;
      background: rgba(0, 255, 157, 0.05);
      border: 1px solid rgba(0, 255, 157, 0.15);
      border-radius: 16px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

.stat-ultra::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--primary-glow), transparent);
      transform: translateX(-100%);
      transition: transform 0.8s;
    }

.stat-ultra:hover::before {
      transform: translateX(100%);
    }

.stat-ultra:hover {
      background: rgba(0, 255, 157, 0.1);
      border-color: rgba(0, 255, 157, 0.4);
      transform: translateY(-8px) scale(1.05);
      box-shadow: 0 12px 32px rgba(0, 255, 157, 0.3);
    }

.stat-number {
      font-size: 32px;
      font-weight: 900;
      background: linear-gradient(135deg, var(--primary-glow) 0%, var(--primary) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 6px;
      animation: number-count 2s ease-out;
    }

@keyframes number-count {
      0% {
        transform: scale(0);
        opacity: 0;
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

.stat-text {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.7);
      font-weight: 600;
    }

/* ===== SECTIONS ===== */
    /* Transparent: the site background is the treatment now, so a section only
       needs spacing. It previously painted white here and a light grey on
       .dark, which is exactly inverted from what a dark page wants. */
    .section-ultra {
      position: relative;
      padding: 100px 40px;
      background: transparent;
      overflow: hidden;
    }

    /* Recedes rather than "goes dark", now that the page itself is dark. */
    .section-ultra.dark {
      background: rgba(0, 0, 0, 0.22);
    }

.section-ultra::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--primary), transparent);
      opacity: 0.5;
    }

.container-ultra {
      max-width: 1400px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

.section-header-ultra {
      text-align: center;
      max-width: 750px;
      margin: 0 auto 60px;
    }

    /* Accent, not the base green: on a dark ground the base green measured
       3.99:1 here, below AA for this size. */
    .section-tag-ultra {
      display: inline-block;
      color: var(--primary-glow);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 2.5px;
      margin-bottom: 14px;
      position: relative;
      padding: 0 20px;
    }

.section-tag-ultra::before,
    .section-tag-ultra::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 30px;
      height: 2px;
      background: linear-gradient(90deg, var(--primary), transparent);
    }

.section-tag-ultra::before {
      left: -35px;
    }

.section-tag-ultra::after {
      right: -35px;
      background: linear-gradient(90deg, transparent, var(--primary));
    }

.section-title-ultra {
      font-size: clamp(36px, 5vw, 48px);
      font-weight: 900;
      color: var(--text-dark);
      line-height: 1.2;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

.section-desc-ultra {
      font-size: 17px;
      color: var(--text-muted);
      line-height: 1.7;
    }

/* About Grid */
    .about-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: start;
    }

.about-content p {
      font-size: 16px;
      color: var(--text-muted);
      line-height: 1.8;
      margin-bottom: 18px;
    }

.features-grid {
      display: grid;
      gap: 18px;
    }

.feature-card {
      display: flex;
      gap: 16px;
      padding: 24px;
      background: var(--bts-panel);
      border-radius: 14px;
      border: 1px solid var(--bts-border);
      transition: all 0.4s;
      position: relative;
      overflow: hidden;
    }

.feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(180deg, var(--primary), var(--primary-light));
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform 0.4s;
    }

.feature-card:hover {
      transform: translateX(10px);
      border-color: var(--primary);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

.feature-card:hover::before {
      transform: scaleY(1);
    }

.feature-icon-box {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.4s;
    }

.feature-card:hover .feature-icon-box {
      transform: scale(1.15) rotate(360deg);
    }

.feature-icon-box i {
      font-size: 24px;
      color: var(--white);
    }

.feature-content h4 {
      font-size: 17px;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 6px;
    }

.feature-content p {
      font-size: 14px;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.6;
    }

/* Services Grid */
    .services-layout {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }

.service-card-ultra {
      background: var(--bts-panel);
      border-radius: 18px;
      padding: 36px 30px;
      border: 1px solid var(--bts-border);
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

.service-card-ultra::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--primary-light));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.5s;
    }

.service-card-ultra::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top right, rgba(0, 168, 89, 0.08), transparent);
      opacity: 0;
      transition: opacity 0.5s;
    }

.service-card-ultra:hover {
      transform: translateY(-12px);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
      border-color: var(--primary);
    }

.service-card-ultra:hover::before {
      transform: scaleX(1);
    }

.service-card-ultra:hover::after {
      opacity: 1;
    }

.service-icon-ultra {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      transition: all 0.5s;
      position: relative;
      z-index: 1;
    }

.service-card-ultra:hover .service-icon-ultra {
      transform: scale(1.15) rotate(8deg);
      box-shadow: 0 12px 32px rgba(0, 168, 89, 0.5);
    }

.service-icon-ultra i {
      font-size: 34px;
      color: var(--white);
    }

.service-card-ultra h3 {
      font-size: 20px;
      font-weight: 800;
      color: var(--text-dark);
      margin-bottom: 12px;
      position: relative;
      z-index: 1;
    }

.service-card-ultra h3 a {
      color: inherit;
      text-decoration: none;
      transition: color 0.3s;
    }

.service-card-ultra:hover h3 a {
      color: var(--primary);
    }

.service-card-ultra p {
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.7;
      margin: 0;
      position: relative;
      z-index: 1;
    }

/* Clients Grid */
    .clients-layout {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 24px;
    }

.client-card-ultra {
      background: var(--bts-panel);
      border: 1px solid var(--bts-border);
      border-radius: 16px;
      padding: 32px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 130px;
      transition: all 0.4s;
      position: relative;
      overflow: hidden;
    }

.client-card-ultra::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--primary), var(--primary-light));
      transform: scaleX(0);
      transition: transform 0.4s;
    }

.client-card-ultra:hover {
      transform: translateY(-8px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
      border-color: var(--primary);
    }

.client-card-ultra:hover::before {
      transform: scaleX(1);
    }

.client-card-ultra img {
      max-width: 100%;
      max-height: 55px;
      width: auto;
      height: auto;
      object-fit: contain;
      transition: all 0.4s;
    }

.client-card-ultra:hover img {
      transform: scale(1.1);
    }

/* ===== RESPONSIVE ===== */
    @media (max-width: 1200px) {
      .services-layout {
        grid-template-columns: repeat(2, 1fr);
      }
      .clients-layout {
        grid-template-columns: repeat(4, 1fr);
      }
    }

@media (max-width: 768px) {
      .hero-wrap {
        padding: 90px 20px 40px;
      }
      .title-ultra {
        font-size: 38px;
      }
      .buttons-ultra {
        flex-direction: column;
      }
      .btn-ultra-primary,
      .btn-ultra-secondary {
        width: 100%;
        justify-content: center;
      }
      .stats-ultra {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
      .section-ultra {
        padding: 70px 20px;
      }
      .about-layout {
        grid-template-columns: 1fr;
        gap: 35px;
      }
      .services-layout {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .clients-layout {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
    }

@media (max-width: 480px) {
      .stats-ultra {
        grid-template-columns: 1fr;
      }
      .clients-layout {
        grid-template-columns: 1fr;
      }
    }