/* /assets/css/style.css
   Small global styles to complement Tailwind (no resets here) */

/* ---------- Brand tokens (match homepage) ---------- */
:root{
  --brand-blue:        #1D4ED8; /* Tailwind blue-700 */
  --brand-blue-600:    #2563EB; /* Tailwind blue-600 */
  --brand-indigo-600:  #4F46E5; /* Tailwind indigo-600 */
  --brand-yellow:      #FACC15; /* Tailwind yellow-400 */
  --gray-50:           #F9FAFB;

  /* Hero gradient from homepage */
  --hero-from: #C084FC;  /* purple-400 */
  --hero-via:  #F9A8D4;  /* pink-300 */
  --hero-to:   #818CF8;  /* indigo-400 */
}

/* ---------- Global polish ---------- */
html{ scroll-behavior:smooth; }
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:0.01em;
}
*{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

img,svg,video{ display:block; max-width:100%; height:auto; }

/* Accessible focus rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--brand-yellow);
  outline-offset:2px;
  border-radius:.5rem;
}

/* Placeholder & autofill */
::placeholder{ color: rgb(156 163 175); } /* gray-400 */

input:-webkit-autofill,
textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  -webkit-text-fill-color: rgb(17 24 39); /* gray-900 */
  transition: background-color 99999s ease-in-out 0s;
}

/* Remove number spinners (just in case) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
input[type="number"]{ -moz-appearance:textfield; }

/* ---------- Utilities that match the design ---------- */

/* Hero gradient helper (only if you ever need it without Tailwind classes) */
.hero-gradient{
  background: linear-gradient(135deg, var(--hero-from), var(--hero-via) 50%, var(--hero-to));
}

/* Soft gradient button helper if needed in plain CSS */
.btn-gradient{
  background:linear-gradient(90deg, var(--brand-blue-600), var(--brand-indigo-600));
  color:#fff;
}

/* Calendly iframe wrapper */
.calendly-embed{
  border:1px solid rgb(229 231 235); /* gray-200 */
  border-radius:1rem;
  overflow:hidden;
}

/* Sticky header blur helper (Safari-friendly) */
.header-blur{
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  backdrop-filter:saturate(180%) blur(8px);
}

/* ---------- Success modal behavior ---------- */
/* Lock scroll when modal is open (toggle via JS with body.modal-open) */
body.modal-open{ overflow:hidden; }

/* Fade overlay */
#successModal{
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
#successModal:not(.hidden){
  opacity:1;
  pointer-events:auto;
}

/* Pop-in panel animation (targets the direct child panel) */
#successModal > div{
  transform: translateY(8px) scale(.98);
  transition: transform .2s ease;
}
#successModal:not(.hidden) > div{
  transform: translateY(0) scale(1);
}

/* ===== Modals (Case Study) ===== */

/* Prevent background scroll while the modal is open */
.modal-open { 
  overflow: hidden;
}

/* Ensure modal overlay sits above the sticky header (header uses z-50) */
#case-modal {
  z-index: 60; /* > 50 */
}

/* Simple fade/scale-in animation for the modal panel */
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-in {
  animation: modal-in .18s ease-out both;
}


/* ===== FAQ accordion – single, unified rule ===== */
.faq-answer{
  /* spacing */
  padding: 0 1.25rem 1.25rem;

  /* animation + behavior */
  overflow: hidden;
  max-height: 0;                 /* collapsed by default */
  opacity: 0;                    /* fade out when closed */
  will-change: max-height;
  transition:
    max-height 380ms cubic-bezier(.33,1,.68,1),
    opacity 220ms ease-out;
}
.faq-open .faq-answer{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .faq-answer{ transition: none !important; }
}

/* ===========================
 * Brandible UI helpers (append)
 * =========================== */

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 0.875rem 1.5rem;           /* ~py-3.5 px-6 */
  border-radius: 1rem;                /* rounded-2xl */
  font-weight: 700;                   /* font-bold */
  line-height: 1.2;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .06s ease, background .2s ease, opacity .2s ease, border-color .2s ease, color .2s ease;
  cursor: pointer;
  user-select: none;
}

/* Primary: blue → indigo gradient on brand */
.btn-primary{
  background: linear-gradient(90deg, var(--brand-blue-600), var(--brand-indigo-600));
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .18);
}
.btn-primary:hover{ box-shadow: 0 10px 26px rgba(37, 99, 235, .28); transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); box-shadow: 0 4px 12px rgba(37, 99, 235, .20); }
.btn-primary:focus-visible{ outline: 2px solid var(--brand-yellow); outline-offset: 3px; }
.btn-primary[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }

/* Secondary: yellow call-to-action on light backgrounds */
.btn-secondary{
  background: linear-gradient(90deg, #FACC15, #F59E0B); /* yellow-400 → amber-500 */
  color: #111827;                                       /* gray-900 */
  border: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 6px 18px rgba(245, 158, 11, .20);
}
.btn-secondary:hover{ box-shadow: 0 10px 26px rgba(245, 158, 11, .30); transform: translateY(-1px); }
.btn-secondary:active{ transform: translateY(0); box-shadow: 0 4px 12px rgba(245, 158, 11, .22); }
.btn-secondary:focus-visible{ outline: 2px solid #FDE68A; outline-offset: 3px; } /* yellow-200 */
.btn-secondary[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }

/* Ghost: for use on colorful/imagery/gradient sections */
.btn-ghost{
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 2px solid rgba(255,255,255,.35);
  backdrop-filter: saturate(160%) blur(2px);
}
.btn-ghost:hover{ background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.55); transform: translateY(-1px); }
.btn-ghost:active{ transform: translateY(0); }
.btn-ghost:focus-visible{ outline: 2px solid var(--brand-yellow); outline-offset: 3px; }

/* Cards */
.card{
  background: #fff;
  border: 1px solid rgb(229 231 235); /* gray-200 */
  border-radius: 1rem;                 /* rounded-2xl */
  padding: 1.5rem;                     /* p-6 */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .25s ease, transform .15s ease, border-color .25s ease;
}
.card:hover{ box-shadow: 0 10px 28px rgba(2,6,23,.08); transform: translateY(-1px); }
.card:focus-within{ outline: 2px solid var(--brand-yellow); outline-offset: 3px; }

/* Section titles (pair with Tailwind spacing utilities in HTML) */
.section-title{
  font-size: clamp(1.875rem, 1.2rem + 2vw, 2.25rem); /* ~text-3xl→4xl */
  font-weight: 800;
  color: rgb(17 24 39);                              /* gray-900 */
  letter-spacing: -0.01em;
}
.sub{
  font-size: clamp(1.0625rem, 0.95rem + .5vw, 1.25rem); /* ~text-lg→xl */
  color: rgb(75 85 99);                                  /* gray-600 */
}

/* Optional: utility when you need the hero gradient as a class */
.hero-gradient{ background: linear-gradient(135deg, var(--hero-from), var(--hero-via) 50%, var(--hero-to)); }

.caret {
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  from, to { opacity: 0; }
  50% { opacity: 1; }
}

.caret {
  animation: blink 1s infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}