/*
Theme Name: MJ Puzzle
Theme URI: https://example.com/mj-puzzle
Author: MJ Puzzle
Author URI: https://example.com
Description: A modern, responsive WordPress theme for AI, Computer Vision, Robotics, Data Analysis, and Emerging Technology companies. Features an animated hero, six service sections, a technology showcase, animated cards, mobile navigation, a CTA/contact section, and full WordPress Customizer support.
Version: 2.1.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mj-puzzle
Tags: blog, one-column, two-columns, right-sidebar, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   TOKENS
   ========================================================= */
:root{
  /* Core palette — deep violet ground, vivid orange / purple / pink signal */
  --c-bg:            #170B26;
  --c-bg-alt:        #1E1033;
  --c-surface:       #2A173F55;
  --c-surface-solid: #2A173F;
  --c-border:        #4A2E73;
  --c-border-soft:   #34204F;

  --c-blue:          #FF7A29;
  --c-blue-deep:     #E85D04;
  --c-violet:        #A855F7;
  --c-cyan:          #FF3EA5;

  --c-text:          #F3ECFF;
  --c-text-dim:      #C9B8E8;
  --c-text-mute:     #8E7AB5;

  --grad-signal: linear-gradient(120deg, var(--c-blue) 0%, var(--c-violet) 55%, var(--c-cyan) 100%);
  --grad-signal-soft: linear-gradient(120deg, rgba(255,122,41,.16) 0%, rgba(168,85,247,.16) 55%, rgba(255,62,165,.16) 100%);
  --grad-radial-glow: radial-gradient(circle at 30% 20%, rgba(168,85,247,.35), transparent 55%),
                      radial-gradient(circle at 80% 0%, rgba(255,62,165,.25), transparent 45%),
                      radial-gradient(circle at 50% 100%, rgba(255,122,41,.25), transparent 55%);

  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --fs-h1: clamp(2.4rem, 5vw + 1rem, 4.6rem);
  --fs-h2: clamp(1.9rem, 3vw + 1rem, 3rem);
  --fs-h3: clamp(1.3rem, 1.4vw + 1rem, 1.7rem);
  --fs-body: 1rem;
  --fs-small: .85rem;
  --fs-eyebrow: .78rem;

  /* Layout */
  --wrap: 1220px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --gap-section: clamp(64px, 9vw, 128px);

  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Customizer-overridable accent variables (fallbacks above; PHP prints overrides in head) */

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.mj-menu-open{ overflow: hidden; }

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: #fff;
}
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }
p{ margin: 0 0 1em; color: var(--c-text-dim); }

.container{
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

.text-gradient{
  background: var(--grad-signal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-cyan);
  margin-bottom: 18px;
}
.eyebrow::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad-signal);
  box-shadow: 0 0 10px 2px rgba(168,85,247,.7);
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s ease, border-color .3s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--grad-signal);
  color: #1B0E26;
  box-shadow: 0 8px 30px -8px rgba(168,85,247,.65);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(255,122,41,.7); }
.btn-ghost{
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn-ghost:hover{ border-color: var(--c-cyan); color: var(--c-cyan); transform: translateY(-2px); }
.btn-arrow{ transition: transform .3s var(--ease-out); }
.btn:hover .btn-arrow{ transform: translateX(4px); }

section{ position: relative; }
.section-pad{ padding: var(--gap-section) 0; }

.section-head{
  max-width: 640px;
  margin: 0 0 56px;
}
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head p{ font-size: 1.05rem; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--c-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* scroll reveal base */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* =========================================================
   FLOATING WHATSAPP CHATBOT BUTTON
   ========================================================= */
.mj-chatbot-fab{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 998;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-signal);
  box-shadow: 0 14px 34px -10px rgba(168,85,247,.65);
  animation: mj-bot-bounce 3.2s ease-in-out infinite;
  transition: transform .3s var(--ease-out), box-shadow .3s ease;
}
.mj-chatbot-fab:hover,
.mj-chatbot-fab:focus-visible{
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 18px 40px -10px rgba(255,122,41,.6);
}

.mj-chatbot-ring{
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--c-cyan);
  opacity: .6;
  animation: mj-bot-ping 2.4s ease-out infinite;
  pointer-events: none;
}

.mj-chatbot-icon{ position: relative; z-index: 2; display: flex; }
.mj-chatbot-icon svg{ width: 30px; height: 30px; stroke: #1B0E26; }

.mj-chatbot-tooltip{
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--c-surface-solid);
  border: 1px solid var(--c-border-soft);
  color: var(--c-text);
  font-size: .82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none;
}
.mj-chatbot-fab:hover .mj-chatbot-tooltip,
.mj-chatbot-fab:focus-visible .mj-chatbot-tooltip{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

@keyframes mj-bot-bounce{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
@keyframes mj-bot-ping{
  0%{ transform: scale(1); opacity: .6; }
  80%, 100%{ transform: scale(1.45); opacity: 0; }
}

@media (max-width: 640px){
  .mj-chatbot-fab{ right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .mj-chatbot-icon svg{ width: 26px; height: 26px; }
  .mj-chatbot-tooltip{ display: none; }
}

/* =========================================================
   MJ PUZZLE 3.0 — interactive service/process enhancements
   ========================================================= */
.service-card{
  position:relative;
  overflow:hidden;
  transition:transform .35s var(--ease-out), border-color .35s ease, box-shadow .35s ease;
}
.service-card::after{
  content:"";
  position:absolute;
  inset:auto -25% -55% 35%;
  height:180px;
  background:radial-gradient(circle, rgba(255,62,165,.16), transparent 65%);
  pointer-events:none;
  transition:transform .45s ease;
}
.service-card:hover{
  transform:translateY(-8px);
  border-color:rgba(255,62,165,.4);
  box-shadow:0 24px 60px -32px rgba(168,85,247,.7);
}
.service-card:hover::after{transform:translate(-20px,-20px);}
.service-link{position:relative;z-index:2}
.mj-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mj-process-card{
  position:relative;
  padding:30px 26px;
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  transition:transform .35s var(--ease-out),border-color .35s ease,background .35s ease;
}
.mj-process-card:hover{transform:translateY(-6px);border-color:var(--c-cyan);background:rgba(255,255,255,.06)}
.mj-process-number{font-family:var(--font-mono);font-size:.78rem;color:var(--c-cyan);letter-spacing:.12em}
.mj-process-card h3{margin:34px 0 10px}
.mj-process-card p{margin:0;color:var(--c-text-dim)}
.mj-form-alert{
  margin:0 0 24px;padding:14px 18px;border-radius:14px;border:1px solid var(--c-border);
  font-weight:600;
}
.mj-form-alert.success{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.35)}
.mj-form-alert.error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35)}
.mj-form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media (max-width:900px){.mj-process-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.mj-process-grid{grid-template-columns:1fr}.mj-process-card{padding:24px}}