/*
Theme Name: CraftDigital BoldStudio
Theme URI: https://seekcraftdigital.com
Author: CraftDigital
Author URI: https://seekcraftdigital.com
Description: Bold, energetic digital studio theme for CraftDigital BoldStudio.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: craftdigital
*/

/* ============================================================
   RESET & BASE
   ============================================================ */

   * { box-sizing: border-box; }

   html, body {
     margin: 0; padding: 0;
     background: #0A0A0A;
     font-family: 'Syne', sans-serif;
   }
   
   body { overflow-x: hidden; }
   
   /* ============================================================
      TOP BAR — FROSTED GLASS
      ============================================================ */
   
   #top-bar {
     position: fixed;
     top: 0; left: 0; right: 0;
     z-index: 1000;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 2rem;
     height: 64px;
     background: rgba(10, 10, 10, 0.45);
     backdrop-filter: blur(16px) saturate(180%);
     -webkit-backdrop-filter: blur(16px) saturate(180%);
     border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   }
   
   .tb-logo {
     font-family: 'Syne', sans-serif;
     font-weight: 800;
     font-size: 1rem;
     color: #D6FF00;
     text-decoration: none;
     letter-spacing: 0.02em;
   }
   
   .tb-right {
     display: flex;
     align-items: center;
     gap: 2rem;
   }
   
   .tb-links {
     list-style: none;
     margin: 0; padding: 0;
     display: flex;
     gap: 1.75rem;
   }
   
   .tb-links a {
     font-family: 'DM Mono', monospace;
     font-weight: 300;
     font-size: 0.8rem;
     color: rgba(255, 255, 255, 0.65);
     text-decoration: none;
     letter-spacing: 0.05em;
     text-transform: none;
     transition: color 0.2s;
   }
   
   .tb-links a:hover { color: #D6FF00; }
   
   .tb-cta {
     font-family: 'DM Mono', monospace;
     font-size: 0.75rem;
     font-weight: 400;
     letter-spacing: 0.06em;
     text-transform: none;
     color: #0A0A0A;
     background: #D6FF00;
     padding: 0.5rem 1.1rem;
     border-radius: 100px;
     text-decoration: none;
     transition: opacity 0.2s;
   }
   
   .tb-cta:hover { opacity: 0.85; }
   
   #nav-hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     background: none;
     border: none;
     cursor: pointer;
     padding: 4px;
   }
   
   #nav-hamburger span {
     display: block;
     width: 22px;
     height: 2px;
     background: #fff;
     border-radius: 2px;
   }
   
   #nav-drawer {
     display: none;
     position: fixed;
     top: 64px; left: 0; right: 0;
     background: rgba(10, 10, 10, 0.96);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.07);
     z-index: 999;
     flex-direction: column;
     padding: 1.5rem 2rem;
     gap: 1.25rem;
   }
   
   #nav-drawer.open { display: flex; }
   
   #nav-drawer a {
     font-family: 'DM Mono', monospace;
     font-size: 0.85rem;
     font-weight: 300;
     letter-spacing: 0.08em;
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     text-transform: none;
   }
   
   #nav-drawer a:hover { color: #D6FF00; }
   
   /* ============================================================
      HERO
      ============================================================ */
   
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
    }

   .hero {
     background: #0A0A0A;
     color: #fff;
     padding-top: 64px;
   }
   
   .hero-inner {
     max-width: 1280px;
     margin: 0 auto;
     padding: 5rem 2rem 4rem;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: center;
   }
   
   .badge {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     font-family: 'DM Mono', monospace;
     font-size: 0.7rem;
     font-weight: 300;
     letter-spacing: 0.1em;
     color: rgba(255, 255, 255, 0.75);
     border: 1px solid rgba(255, 255, 255, 0.18);
     padding: 0.45rem 1rem;
     border-radius: 100px;
     margin-bottom: 1.5rem;
     text-transform: uppercase;
   }
   
   .hero-title {
     font-family: 'Syne', sans-serif;
     font-weight: 800;
     font-size: clamp(2.8rem, 5.5vw, 5rem);
     line-height: 0.95;
     color: #fff;
     text-transform: uppercase;
     letter-spacing: -0.03em;
     margin: 0 0 1.5rem;
   }
   
   .hero-title .accent,
    .accent { color: #D6FF00; }

    /* Purple accent for light sections */
    .promise .accent,
    .process .accent,
    .cta-section .accent { color: #7B2FBE; }
   
   .hero-sub {
     font-family: 'DM Mono', monospace;
     font-style: normal;
     font-weight: 300;
     font-size: 0.85rem;
     letter-spacing: 0.02em;
     line-height: 1.7;
     color: rgba(255, 255, 255, 0.55);
     max-width: 420px;
     margin: 0 0 2rem;
   }
   
   .hero-buttons {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
     margin-bottom: 3rem;
   }
   
   .trust { max-width: 480px; }
   
   .trust-label {
     font-family: 'DM Mono', monospace;
     font-size: 0.65rem;
     letter-spacing: 0.12em;
     color: rgba(255, 255, 255, 0.28);
     text-transform: uppercase;
     margin: 0 0 0.75rem;
   }
   
   .trust-logos {
     display: flex;
     gap: 2rem;
     flex-wrap: wrap;
     font-family: 'Syne', sans-serif;
     font-weight: 600;
     font-size: 0.85rem;
     color: rgba(255, 255, 255, 0.18);
     letter-spacing: 0.05em;
   }
   
   .hero-right img {
     width: 100%;
     max-width: 540px;
     display: block;
     border-radius: 8px;
   }
   
   /* ============================================================
      BUTTONS
      ============================================================ */
   
   .btn-primary {
     display: inline-flex;
     align-items: center;
     font-family: 'DM Mono', monospace;
     font-size: 0.75rem;
     font-weight: 400;
     letter-spacing: 0.08em;
     color: #0A0A0A;
     background: #D6FF00;
     padding: 0.85rem 1.5rem;
     border-radius: 100px;
     text-decoration: none;
     transition: opacity 0.2s;
     white-space: nowrap;
     border: none;
     cursor: pointer;
   }
   
   .btn-primary:hover { opacity: 0.85; }
   
   .btn-ghost {
     display: inline-flex;
     align-items: center;
     font-family: 'DM Mono', monospace;
     font-size: 0.75rem;
     font-weight: 400;
     letter-spacing: 0.08em;
     color: #fff;
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.22);
     padding: 0.85rem 1.5rem;
     border-radius: 100px;
     text-decoration: none;
     transition: border-color 0.2s, color 0.2s;
     white-space: nowrap;
   }
   
   .btn-ghost:hover { border-color: #D6FF00; color: #D6FF00; }
   
   .btn-xl { padding: 1.1rem 2.5rem; font-size: 0.85rem; }
   
   /* ============================================================
      TICKER STRIP
      ============================================================ */
   
   .strip {
     background: #D6FF00;
     overflow: hidden;
     padding: 0.9rem 0;
     white-space: nowrap;
   }
   
   .strip-track {
     display: inline-flex;
     gap: 3rem;
     animation: ticker 32s linear infinite;
     font-family: 'DM Mono', monospace;
     font-size: 0.72rem;
     font-weight: 400;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: #0A0A0A;
   }
   
   @keyframes ticker {
     from { transform: translateX(0); }
     to   { transform: translateX(-50%); }
   }
   
   /* ============================================================
      SHARED SECTION UTILITIES
      ============================================================ */
   
   .section-label {
     display: block;
     font-family: 'DM Mono', monospace;
     font-size: 0.68rem;
     font-weight: 300;
     letter-spacing: 0.15em;
     color: rgba(255, 255, 255, 0.28);
     text-transform: uppercase;
     margin-bottom: 1.5rem;
   }
   
   .section-heading {
     font-family: 'Syne', sans-serif;
     font-weight: 800;
     font-size: clamp(2.2rem, 4vw, 3.5rem);
     line-height: 1.0;
     color: #fff;
     text-transform: uppercase;
     letter-spacing: -0.02em;
     margin: 0 0 3rem;
   }
   
   /* ============================================================
      PROMISE — light
      ============================================================ */
   
   .promise {
     background: #F5F4F0;
     padding: 7rem 2rem;
   }
   
   .promise .section-label { color: #7B2FBE; }
   .promise .section-heading { color: #0A0A0A; }
   
   .promise-inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 5rem;
     align-items: start;
     max-width: 1280px;
     margin: 0 auto;
   }
   
   .promise-right p {
     font-family: 'DM Mono', monospace;
     font-style: normal;
     font-weight: 300;
     font-size: 0.85rem;
     letter-spacing: 0.02em;
     line-height: 1.75;
     color: rgba(0, 0, 0, 0.55);
     margin: 0 0 2rem;
   }
   
   .promise-list {
     list-style: none;
     padding: 0; margin: 0;
   }
   
   .promise-list li {
     font-family: 'DM Mono', monospace;
     font-size: 0.8rem;
     font-weight: 300;
     letter-spacing: 0.05em;
     color: rgba(0, 0, 0, 0.5);
     border-top: 1px solid rgba(0, 0, 0, 0.08);
     padding: 0.85rem 0;
   }
   
   .promise-list li:last-child {
     border-bottom: 1px solid rgba(0, 0, 0, 0.08);
   }
   
   /* ============================================================
      SERVICES — dark
      ============================================================ */
   
   .services {
     background: #0A0A0A;
     padding: 7rem 2rem;
   }
   
   .services-inner {
     max-width: 1280px;
     margin: 0 auto;
   }
   
   .services-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1.25rem;
   }
   
   .service-card {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.07);
     border-radius: 8px;
     padding: 2rem 1.75rem;
     transition: border-color 0.2s;
   }
   
   .service-card:hover { border-color: rgba(214, 255, 0, 0.4); }
   
   .service-num {
     font-family: 'DM Mono', monospace;
     font-size: 0.65rem;
     color: #D6FF00;
     letter-spacing: 0.12em;
     margin-bottom: 1.25rem;
   }
   
   .service-card h3 {
     font-family: 'Syne', sans-serif;
     font-weight: 700;
     font-size: 1rem;
     color: #fff;
     margin: 0 0 0.75rem;
     letter-spacing: -0.01em;
   }
   
   .service-card p {
     font-family: 'DM Mono', monospace;
     font-style: normal;
     font-weight: 300;
     font-size: 0.8rem;
     letter-spacing: 0.02em;
     line-height: 1.7;
     color: rgba(255, 255, 255, 0.45);
     margin: 0;
   }
   
   /* ============================================================
      STATS — lime
      ============================================================ */
   
   .stats {
     background: #D6FF00;
     border-top: 1px solid rgba(0, 0, 0, 0.08);
     border-bottom: 1px solid rgba(0, 0, 0, 0.08);
     display: grid;
     grid-template-columns: repeat(4, 1fr);
   }
   
   .stat-item {
    padding: 2.5rem 2rem;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
  }
   
   .stat-item:last-child { border-right: none; }
   
   .stat-num {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: #0A0A0A;
    line-height: 1;
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
  }
   
   .stat-label {
     font-family: 'DM Mono', monospace;
     font-size: 0.65rem;
     font-weight: 300;
     letter-spacing: 0.12em;
     color: rgba(0, 0, 0, 0.45);
     text-transform: uppercase;
   }
   
   /* ============================================================
      PROCESS — light
      ============================================================ */
   
   .process {
     background: #F5F4F0;
     padding: 7rem 2rem;
   }
   
   .process .section-label { color: #7B2FBE; }
   .process .section-heading { color: #0A0A0A; }
   
   .process-inner {
     max-width: 1280px;
     margin: 0 auto;
   }
   
   .process-steps {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     border: 1px solid rgba(0, 0, 0, 0.08);
     border-radius: 8px;
     overflow: hidden;
   }
   
   .process-step {
     padding: 2.25rem 2rem;
     border-right: 1px solid rgba(0, 0, 0, 0.08);
     transition: background 0.2s;
   }
   
   .process-step:last-child { border-right: none; }
   .process-step:hover { background: rgba(0, 0, 0, 0.02); }
   
   .step-num {
     font-family: 'DM Mono', monospace;
     font-size: 0.65rem;
     color: #0A0A0A;
     letter-spacing: 0.12em;
     margin-bottom: 1.25rem;
   }
   
   .process-step h3 {
     font-family: 'Syne', sans-serif;
     font-weight: 700;
     font-size: 1rem;
     color: #0A0A0A;
     margin: 0 0 0.6rem;
     letter-spacing: -0.01em;
   }
   
   .process-step p {
     font-family: 'DM Mono', monospace;
     font-style: normal;
     font-weight: 300;
     font-size: 0.8rem;
     letter-spacing: 0.02em;
     line-height: 1.7;
     color: rgba(0, 0, 0, 0.45);
     margin: 0;
   }
   
   /* ============================================================
      FAQ — dark
      ============================================================ */
   
   .faq {
     background: #0A0A0A;
     padding: 7rem 2rem;
   }
   
   .faq-inner {
     max-width: 860px;
     margin: 0 auto;
   }
   
   .faq-item { border-top: 1px solid rgba(255, 255, 255, 0.07); }
   .faq-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
   
   .faq-item summary {
     font-family: 'Syne', sans-serif;
     font-weight: 600;
     font-size: 1rem;
     color: #fff;
     cursor: pointer;
     list-style: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem 0;
     letter-spacing: -0.01em;
     user-select: none;
   }
   
   .faq-item summary::-webkit-details-marker { display: none; }
   
   .faq-item summary::after {
     content: '+';
     font-size: 1.25rem;
     color: #D6FF00;
     font-weight: 300;
     line-height: 1;
     transition: transform 0.2s;
     flex-shrink: 0;
     margin-left: 1.5rem;
   }
   
   .faq-item[open] summary::after { transform: rotate(45deg); }
   
   .faq-item p {
     font-family: 'DM Mono', monospace;
     font-style: normal;
     font-weight: 300;
     font-size: 0.82rem;
     letter-spacing: 0.02em;
     line-height: 1.75;
     color: rgba(255, 255, 255, 0.5);
     margin: 0 0 1.5rem;
     max-width: 680px;
   }
   
   /* ============================================================
      CTA / CONTACT — light
      ============================================================ */
   
   .cta-section {
     background: #F5F4F0;
     padding: 7rem 2rem;
     text-align: center;
   }
   
   .cta-inner {
     max-width: 860px;
     margin: 0 auto;
   }
   
   .cta-section .section-label { color: #7B2FBE; }
   
   .cta-heading {
     font-family: 'Syne', sans-serif;
     font-weight: 800;
     font-size: clamp(3rem, 8vw, 7rem);
     line-height: 0.95;
     color: #0A0A0A;
     text-transform: uppercase;
     letter-spacing: -0.04em;
     margin: 0 0 1.5rem;
   }
   
   .cta-heading .accent { color: #7B2FBE; }
   
   .cta-sub {
     font-family: 'DM Mono', monospace;
     font-style: normal;
     font-weight: 300;
     font-size: 0.85rem;
     letter-spacing: 0.02em;
     line-height: 1.75;
     color: rgba(0, 0, 0, 0.5);
     margin: 0 auto 2.5rem;
     max-width: 420px;
   }
   
   .cta-email {
     margin-top: 1.5rem;
     font-family: 'DM Mono', monospace;
     font-size: 0.72rem;
     font-weight: 300;
     color: rgba(0, 0, 0, 0.35);
     letter-spacing: 0.06em;
   }
   
   .cta-email a {
     color: rgba(0, 0, 0, 0.55);
     text-decoration: underline;
     text-underline-offset: 3px;
   }
   
   .cta-email a:hover { color: #0A0A0A; }
   
   /* ============================================================
      CONTACT FORM
      ============================================================ */
   
   .contact-form {
     max-width: 640px;
     margin: 0 auto 2rem;
     text-align: left;
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
   }
   
   .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1.25rem;
   }
   
   .form-group {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
   
   .form-group label {
     font-family: 'DM Mono', monospace;
     font-size: 0.65rem;
     font-weight: 300;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: rgba(0, 0, 0, 0.4);
   }
   
   .form-group input,
   .form-group select,
   .form-group textarea {
     font-family: 'DM Mono', monospace;
     font-size: 0.82rem;
     font-weight: 300;
     color: #0A0A0A;
     background: rgba(0, 0, 0, 0.04);
     border: 1px solid rgba(0, 0, 0, 0.12);
     border-radius: 6px;
     padding: 0.85rem 1rem;
     outline: none;
     transition: border-color 0.2s;
     width: 100%;
   }
   
   .form-group input::placeholder,
   .form-group textarea::placeholder { color: rgba(0, 0, 0, 0.25); }
   
   .form-group input:focus,
   .form-group select:focus,
   .form-group textarea:focus { border-color: #0A0A0A; }
   
   .form-group select {
     appearance: none;
     cursor: pointer;
     color: rgba(0, 0, 0, 0.5);
   }
   
   .form-group select option { background: #fff; color: #0A0A0A; }
   
   .form-group textarea {
     resize: vertical;
     min-height: 120px;
   }
   
   .contact-form .btn-primary { align-self: flex-start; }
   
   .form-success {
     font-family: 'DM Mono', monospace;
     font-size: 0.85rem;
     font-weight: 300;
     color: #0A0A0A;
     letter-spacing: 0.05em;
     margin-bottom: 1.5rem;
     background: #D6FF00;
     padding: 1rem 1.5rem;
     border-radius: 6px;
   }
   
   /* ============================================================
      FOOTER
      ============================================================ */
   
      .site-footer {
        background: #0A0A0A;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding: 2rem;
      }
      
      .footer-inner {
        max-width: 1280px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }
      
      .footer-logo {
        font-family: 'Syne', sans-serif;
        font-weight: 800;
        font-size: 0.9rem;
        color: #D6FF00;
        letter-spacing: 0.02em;
      }
      
      .footer-copy {
        font-family: 'DM Mono', monospace;
        font-size: 0.65rem;
        font-weight: 300;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.2);
        white-space: nowrap;
      }
      
      @media (max-width: 480px) {
        .footer-inner {
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 0.5rem;
        }
      }
   
      /* ============================================================
   HOVER EFFECTS
   ============================================================ */

/* Process steps */
.process-step {
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}

.process-step::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #7B2FBE;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.process-step:hover::before { transform: scaleX(1); }
.process-step:hover .step-num { color: #7B2FBE; }
.process-step:hover h3 { color: #7B2FBE; }

/* Service cards */
.service-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #D6FF00;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { transform: translateY(-4px); border-color: rgba(214, 255, 0, 0.3); }
.service-card:hover .service-num { color: #D6FF00; }

/* FAQ items */
.faq-item summary {
  transition: color 0.2s;
}

.faq-item:hover summary {
  color: #D6FF00;
}

/* Stat items */
.stat-item {
  transition: background 0.2s;
}

.stat-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

   /* ============================================================
      RESPONSIVE — 1024px
      ============================================================ */
   
   @media (max-width: 1024px) {
     .services-grid { grid-template-columns: repeat(2, 1fr); }
   
     .process-steps { grid-template-columns: repeat(2, 1fr); }
     .process-step:nth-child(2) { border-right: none; }
     .process-step:nth-child(3),
     .process-step:nth-child(4) { border-top: 1px solid rgba(0, 0, 0, 0.08); }
   }
   
   /* ============================================================
      RESPONSIVE — 768px
      ============================================================ */
   
   @media (max-width: 768px) {
     .tb-links { display: none; }
     #nav-hamburger { display: flex; }
   
     .section-heading {
      font-size: clamp(1.5rem, 7.5vw, 3.5rem);
      word-break: normal;
      overflow: hidden;
    }

     .hero-inner {
       grid-template-columns: 1fr;
       padding: 3rem 1.5rem 4rem;
       gap: 2.5rem;
       text-align: center;
     }
   
     .hero-title {
       font-size: clamp(2.2rem, 11vw, 5rem);
       letter-spacing: -0.04em;
       line-height: 0.92;
       margin: 0 auto 1.5rem;
     }
   
     .hero-sub { margin: 0 auto 2rem; }
   
     .hero-buttons { justify-content: center; }
   
     .trust { text-align: center; margin: 0 auto; }
     .trust-logos { justify-content: center; }
   
     .hero-right { width: 100%; display: block; }
     .hero-right img { width: 100%; max-width: 100%; }
   
     .promise-inner { grid-template-columns: 1fr; gap: 2.5rem; }
   
     .services-grid { grid-template-columns: 1fr; }
   
     .stats { grid-template-columns: repeat(2, 1fr); }
     .stat-item:nth-child(2) { border-right: none; }
     .stat-item:nth-child(3),
     .stat-item:nth-child(4) { border-top: 1px solid rgba(0, 0, 0, 0.1); }
   
     .process-steps { grid-template-columns: 1fr; }
     .process-step { border-right: none; border-top: 1px solid rgba(0, 0, 0, 0.08); }
     .process-step:first-child { border-top: none; }
   }
   
   /* ============================================================
      RESPONSIVE — 600px
      ============================================================ */
   
   @media (max-width: 600px) {
     .form-row { grid-template-columns: 1fr; }
     .contact-form .btn-primary { align-self: stretch; justify-content: center; }
   }
   
   /* ============================================================
      RESPONSIVE — 480px
      ============================================================ */
   
   @media (max-width: 480px) {
     #top-bar { padding: 0 1.25rem; }
     .hero-inner,
     .promise,
     .services,
     .process,
     .faq,
     .cta-section { padding-left: 1.25rem; padding-right: 1.25rem; }
   }