/* ============================================================
   TMK GLOBAL LLC — responsive.css
   All @media Queries (extracted from styles, home, services)
============================================================ */

/* ============================================================
   HOVER: HOMEPAGE CARDS
============================================================ */
@media (hover: hover) {
  .service-card:hover::after { opacity: 1; }
  .service-card:hover {
    border-color: var(--glass-border-h);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.45), 0 0 30px rgba(0,255,136,0.12);
  }
}

@media (hover: hover) {
  .service-card:hover .service-icon-wrap {
    transform: scale(1.1) rotate(-6deg);
    border-color: var(--neon-green);
    box-shadow: 0 0 22px var(--neon-green-glow);
  }
}

@media (hover: hover) {
  .blog-card:hover {
    transform: translateY(-7px);
    border-color: var(--glass-border-h);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.4);
  }
}

/* ============================================================
   HOVER: SERVICE DETAIL CARDS
============================================================ */
@media (hover: hover) {
  .sd-offer-card:hover::after { opacity: 1; }
  .sd-offer-card:hover {
    border-color: var(--glass-border-h);
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 24px rgba(0,255,136,0.1);
  }
  .sd-offer-card:hover .sd-offer-icon {
    transform: scale(1.1) rotate(-5deg);
    border-color: var(--neon-green);
    box-shadow: 0 0 18px var(--neon-green-glow);
  }
}

@media (hover: hover) {
  .sd-equip-card:hover {
    border-color: var(--glass-border-h);
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 16px rgba(0,255,136,0.1);
  }
  .sd-equip-card:hover .sd-equip-icon { transform: scale(1.15); }
}

@media (hover: hover) {
  .sd-result-item:hover {
    border-color: var(--glass-border-h);
    transform: translateY(-5px);
    box-shadow: var(--shadow-neon);
  }
  .sd-result-item:hover .sd-result-icon { box-shadow: 0 0 18px var(--neon-green-glow); }
}

/* ============================================================
   HOVER: PRICING CARDS
============================================================ */
@media (hover: hover) {
  .price-card:hover {
    border-color: var(--glass-border-h);
    transform: translateY(-6px);
    box-shadow: 0 20px 52px rgba(0,0,0,0.4), 0 0 28px rgba(0,255,136,0.1);
  }
  .price-card.popular:hover {
    transform: translateY(-16px);
    box-shadow: 0 32px 72px rgba(0,0,0,0.55), 0 0 56px rgba(0,255,136,0.25);
  }
}

/* ============================================================
   MIN-WIDTH: SERVICES GRID CENTERING (Homepage)
============================================================ */
@media (min-width: 992px) {
  .services-grid .service-card:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}

/* ============================================================
   MAX-WIDTH: 1199px — General
============================================================ */
@media (max-width: 1199px) {
  :root { --sec-pad: 72px; }

  .hero-visual { width: 300px; height: 300px; }
  .cube-scene  { width: 110px; height: 110px; }
  .orbit-1 { width: 160px; height: 160px; }
  .orbit-2 { width: 230px; height: 230px; }
  .orbit-3 { width: 295px; height: 295px; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner  { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ============================================================
   MAX-WIDTH: 1199px — Service Pages
============================================================ */
@media (max-width: 1199px) {
  .sd-equip-grid  { grid-template-columns: repeat(3, 1fr); }
  .sd-hero-visual { width: 320px; height: 360px; }
  .holo-panel     { width: 300px; }
  .sd-orbit-1     { width: 310px; height: 310px; }
  .sd-orbit-2     { width: 370px; height: 370px; }
}

/* ============================================================
   MAX-WIDTH: 991px — General
============================================================ */
@media (max-width: 991px) {
  .nav-links,
  .nav-cta  { display: none; }
  .hamburger { display: flex; }

  .hero-visual { display: flex; }
  .hero-content { max-width: 700px; padding: 40px 0; }

  .about-grid   { grid-template-columns: 1fr; gap: 52px; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ============================================================
   MAX-WIDTH: 991px — Service Pages
============================================================ */
@media (max-width: 991px) {
  .sd-hero-inner    { flex-direction: column; gap: 40px; padding-bottom: 48px; }
  .sd-hero-content  { max-width: 100%; padding: 32px 0 0; text-align: center; }
  .sd-hero-sub      { margin-left: auto; margin-right: auto; }
  .sd-hero-ctas     { justify-content: center; }
  .sd-mini-stats    { justify-content: center; }
  .sd-hero-visual   { width: 320px; height: 340px; }

  .sd-offer-grid    { grid-template-columns: repeat(2, 1fr); }
  .sd-why-grid      { grid-template-columns: 1fr; gap: 44px; }
  .sd-results-grid  { grid-template-columns: repeat(2, 1fr); }
  .sd-equip-grid    { grid-template-columns: repeat(3, 1fr); }

  .sd-process-timeline  { flex-direction: column; gap: 0; }
  .sd-process-step      { text-align: left; padding: 0 0 28px 72px; position: relative; }
  .sd-step-num          { position: absolute; left: 0; top: 0; margin: 0; }
  .sd-process-connector { display: none; }
  .sd-process-step::after {
    content: '';
    position: absolute;
    left: 27px; top: 56px;
    width: 1px; height: calc(100% - 56px);
    background: linear-gradient(180deg, rgba(0,255,136,0.3), transparent);
  }
  .sd-process-step:last-child::after { display: none; }

  body.service-page .sd-floating-chip,
  body.service-page .sd-hero-beam {
    display: block !important;
  }

  .sd-hero-heading {
    font-size: clamp(2.2rem, 10vw, 3.5rem);
  }

  .sd-mini-stats {
    width: 100%;
  }
}

/* ============================================================
   MAX-WIDTH: 991px — Pricing
============================================================ */
@media (max-width: 991px) {
  .pricing-grid              { grid-template-columns: 1fr; gap: 18px; }
  .price-card.popular        { transform: none; }
  .popular-badge-placeholder { display: none; }
}

/* ============================================================
   MAX-WIDTH: 767px — General
============================================================ */
@media (max-width: 767px) {
  :root { --sec-pad: 58px; }

  .section-header { margin-bottom: 36px; }

  .services-grid  { grid-template-columns: 1fr; }
  .blog-grid      { grid-template-columns: 1fr; }
  .about-stats    { grid-template-columns: 1fr 1fr; }
  .about-features { grid-template-columns: 1fr; }

  .footer-inner  { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 28px 22px; }

  .hero-content { padding: 28px 0; }
  .hero-cta-group { flex-direction: column; }
  .hero-cta-group .btn { width: 100%; }
  .hero-stats { justify-content: center; }
  .hero-stat-number { font-size: 1.3rem; }

  .blog-thumb { height: 170px; }
}

/* ============================================================
   MAX-WIDTH: 767px — Home Mobile Fix
============================================================ */
@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding-top: 88px;
    padding-bottom: 42px;
  }

  .hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    padding: 18px 0 42px;
  }

  .hero-content {
    max-width: 100%;
    padding: 0 18px;
  }

  .hero-heading {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.8px;
    margin-bottom: 16px;
  }

  .hero-subheading {
    font-size: 15.5px;
    line-height: 1.65;
    margin-bottom: 24px;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .hero-cta-group .btn {
    width: 100%;
    min-height: 56px;
  }

  .hero-stats {
    justify-content: center;
    gap: 18px;
  }

  .hero-stat-divider { display: none; }

  .hero-visual {
    display: flex;
    width: 260px;
    height: 260px;
    margin: 0 auto;
    transform: none;
  }

  .cube-wrapper {
    width: 260px;
    height: 260px;
  }

  .service-cube {
    width: 145px;
    height: 145px;
  }

  .service-cube .cube-face {
    width: 145px;
    height: 145px;
  }

  .service-cube .cube-front  { transform: translateZ(72.5px); }
  .service-cube .cube-back   { transform: rotateY(180deg) translateZ(72.5px); }
  .service-cube .cube-right  { transform: rotateY(90deg) translateZ(72.5px); }
  .service-cube .cube-left   { transform: rotateY(-90deg) translateZ(72.5px); }
  .service-cube .cube-top    { transform: rotateX(90deg) translateZ(72.5px); }
  .service-cube .cube-bottom { transform: rotateX(-90deg) translateZ(72.5px); }

  .service-cube .cube-face i    { font-size: 30px; }
  .service-cube .cube-face span { font-size: 13px; }
  .service-cube .cube-logo      { width: 82px; }
}

/* ============================================================
   MAX-WIDTH: 767px — Service Pages
============================================================ */
@media (max-width: 767px) {
  .sd-offer-grid    { grid-template-columns: 1fr; }
  .sd-equip-grid    { grid-template-columns: repeat(2, 1fr); }
  .sd-results-grid  { grid-template-columns: 1fr 1fr; }

  .sd-hero-visual   { display: flex; }
  .sd-hero-content  { text-align: left; }
  .sd-hero-ctas     { flex-direction: column; }
  .sd-hero-ctas .btn { width: 100%; }
  .sd-mini-stats    { justify-content: flex-start; }

  .sd-final-cta { padding: 72px 0; }
  .sd-cta-btns  { flex-direction: column; align-items: center; }
  .sd-cta-btns .btn { width: 100%; max-width: 340px; }
}

/* ============================================================
   MAX-WIDTH: 767px — Service Pages (Full Override)
============================================================ */
@media (max-width: 767px) {
  body.service-page .sd-hero {
    min-height: auto !important;
    padding-top: 92px !important;
    padding-bottom: 44px !important;
    overflow: hidden !important;
  }

  body.service-page .sd-hero-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 26px !important;
    padding: 0 18px 36px !important;
    min-height: auto !important;
    overflow: hidden !important;
  }

  body.service-page .sd-hero-content {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
  }

  body.service-page .sd-topline-text { display: none !important; }

  body.service-page .sd-hero-heading {
    font-size: clamp(2.15rem, 9.5vw, 2.9rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    max-width: 100% !important;
  }

  body.service-page .sd-hero-sub {
    font-size: 1rem !important;
    line-height: 1.72 !important;
    max-width: 100% !important;
  }

  body.service-page .sd-hero-ctas {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  body.service-page .sd-hero-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 54px !important;
  }

  body.service-page .sd-mini-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 16px 10px !important;
    flex-wrap: nowrap !important;
  }

  body.service-page .sd-ms-divider { display: none !important; }

  body.service-page .sd-mini-stat {
    text-align: center !important;
    min-width: 0 !important;
  }

  body.service-page .sd-ms-num   { font-size: 1.3rem !important; }
  body.service-page .sd-ms-label { font-size: 0.55rem !important; letter-spacing: 0.06em !important; line-height: 1.3 !important; }

  body.service-page .sd-hero-visual {
    width: 100% !important;
    max-width: 320px !important;
    height: 310px !important;
    min-height: 310px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    contain: layout style !important;
    transform: none !important;
  }

  body.service-page .holo-panel {
    width: 280px !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    animation: none !important;
    transform: none !important;
  }

  body.service-page .holo-map,
  body.service-page .supp-schedule,
  body.service-page .wb-preview,
  body.service-page .seo-rankings,
  body.service-page .content-pipeline,
  body.service-page .ai-flow {
    height: 155px !important;
    overflow: hidden !important;
  }

  body.service-page .sd-orbit-1,
  body.service-page .sd-orbit-2,
  body.service-page .sd-glow-blob { display: none !important; }

  body.service-page .sd-chip-2,
  body.service-page .sd-chip-3 { display: none !important; }

  body.service-page .sd-chip-1 {
    display: flex !important;
    transform: scale(0.8) !important;
    top: 14% !important;
    right: 4% !important;
    opacity: 0.85 !important;
  }

  body.service-page .sd-hero-beam { opacity: 0.22 !important; }

  body.service-page .sd-floating-chip,
  body.service-page .sd-hero-beam { display: block !important; }

  body.service-page .section-heading {
    font-size: clamp(2rem, 8vw, 2.7rem) !important;
    line-height: 1.12 !important;
  }

  body.service-page .sd-offer-card,
  body.service-page .sd-result-item,
  body.service-page .sd-equip-card,
  body.service-page .sd-process-step {
    min-height: auto !important;
    padding: 28px 22px !important;
  }

  body.service-page .sd-offer-title {
    font-size: 1.35rem !important;
    margin-top: 18px !important;
  }

  body.service-page .sd-offer-text,
  body.service-page .sd-step-text {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
  }

  body.service-page .sd-process-timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  body.service-page .sd-process-step {
    text-align: left !important;
    position: relative !important;
  }

  body.service-page .sd-process-step::after,
  body.service-page .sd-process-timeline::before { display: none !important; }

  body.service-page .sd-step-num {
    position: static !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 0 18px 0 !important;
    font-size: 1rem !important;
  }

  body.service-page .sd-step-title {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
  }
}

/* ============================================================
   MAX-WIDTH: 767px — Pricing
============================================================ */
@media (max-width: 767px) {
  .pricing-pnav-inner { padding: 8px 16px; }
  .pnav-link          { font-size: 0.72rem; padding: 6px 11px; }
  .pricing-hero       { padding: calc(var(--nav-h) + 48px) 0 52px; }
  .price-value        { font-size: 2.3rem; }
}

/* ============================================================
   MAX-WIDTH: 767px — Service Pricing CTA Banner
============================================================ */
@media (max-width: 767px) {
  .sp-pricing-cta-inner   { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .sp-pricing-btn         { width: 100% !important; justify-content: center; }
  .sp-pricing-cta-heading { font-size: 1.1rem; }
}

/* ============================================================
   MAX-WIDTH: 479px — General
============================================================ */
@media (max-width: 479px) {
  :root { --sec-pad: 46px; }

  .about-stats { grid-template-columns: 1fr; }
  .stat-card   { padding: 22px 16px; }
  .wa-float    { bottom: 18px; right: 18px; }
  .hero-badge  { font-size: 0.7rem; }
  .hero-stats  { gap: 16px; }
}

/* ============================================================
   MAX-WIDTH: 479px — Service Pages
============================================================ */
@media (max-width: 479px) {
  .sd-equip-grid   { grid-template-columns: repeat(2, 1fr); }
  .sd-results-grid { grid-template-columns: 1fr; }

  body.service-page .holo-panel {
    width: 260px !important;
    max-width: 260px !important;
  }
}

/* ============================================================
   PERFORMANCE: Disable backdrop-filter on touch devices
============================================================ */
@media (hover: none) {
  .glass-card,
  .navbar.scrolled,
  .mobile-menu,
  .btn-outline {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============================================================
   ACCESSIBILITY: Reduced Motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}