/* ============================================================
   BusinessMind Co. Ltd. — BMCL site styles
   ============================================================ */

/* ---------- Base ---------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: #17222E;
  background-color: #FFF9F4;
  overflow-x: hidden;
}
h1, h2, h3, h4, .font-display { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; }
.font-serif-accent { font-family: 'Fraunces', ui-serif, Georgia, serif; }

::selection { background: #BB601D; color: #fff; }

/* Smooth in-page anchor offset for the sticky header */
[id] { scroll-margin-top: 96px; }

/* ---------- Scroll reveal ------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-reveal='left']  { transform: translateX(-32px); }
[data-reveal='right'] { transform: translateX(32px); }
[data-reveal='zoom']  { transform: scale(.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------- Image fade ---------------------------------------- */
img[data-fade] { opacity: 0; transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1); }
img[data-fade].is-loaded { opacity: 1; }
[data-reveal='zoom'] img[data-fade] { transform: scale(1.06); }
[data-reveal='zoom'].is-visible img[data-fade] { transform: scale(1); }

/* ---------- Gradient text -------------------------------------- */
.text-gradient {
  background-image: linear-gradient(100deg, #BB601D 0%, #E87329 42%, #F59E0B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-teal {
  background-image: linear-gradient(100deg, #0E8580 0%, #16A69D 45%, #3FC1B8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Arch shape (the BMCL dome motif) ------------------- */
.arch {
  border-radius: 9999px 9999px 28px 28px;
}
.arch-soft {
  border-radius: 260px 260px 28px 28px;
}
.arch-pill {
  border-radius: 9999px;
}

/* ---------- Decorative sunburst rays --------------------------- */
.rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.rays::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 130%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg,
      rgba(187, 96, 29, .10) 0deg 7deg,
      transparent 7deg 16deg);
  border-radius: 50%;
  mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 68%);
}

/* ---------- Dotted / grid texture ------------------------------ */
.grid-texture {
  background-image:
    linear-gradient(rgba(187, 96, 29, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(187, 96, 29, .07) 1px, transparent 1px);
  background-size: 34px 34px;
}
.dot-texture {
  background-image: radial-gradient(rgba(187, 96, 29, .16) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* ---------- Marquee -------------------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Tab panels ------------------------------------------ */
[data-tab-panel].hidden { display: none !important; }

/* ---------- Card interactions ---------------------------------- */
.lift { transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .45s ease; }
.lift:hover { transform: translateY(-7px); box-shadow: 0 30px 55px -26px rgba(23, 34, 46, .34); border-color: rgba(187, 96, 29, .38); }
.lift:hover .lift-icon { transform: rotate(-6deg) scale(1.06); }
.lift-icon { transition: transform .45s cubic-bezier(.16,1,.3,1); }

.shine { position: relative; overflow: hidden; }
.shine::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .85s cubic-bezier(.16,1,.3,1);
}
.shine:hover::after { transform: translateX(120%); }

/* ---------- Buttons -------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border-radius: 9999px; font-weight: 700; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background-color .3s ease, color .3s ease; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-brand { background-image: linear-gradient(120deg, #BB601D 0%, #E87329 52%, #F59E0B 100%); color: #fff; box-shadow: 0 18px 34px -16px rgba(187, 96, 29, .78); }
.btn-brand:hover { transform: translateY(-2px); box-shadow: 0 26px 44px -16px rgba(187, 96, 29, .85); }
.btn-teal { background-image: linear-gradient(120deg, #0E8580 0%, #16A69D 55%, #3FC1B8 100%); color: #fff; box-shadow: 0 18px 34px -16px rgba(14, 133, 128, .7); }
.btn-teal:hover { transform: translateY(-2px); box-shadow: 0 26px 44px -16px rgba(14, 133, 128, .8); }
.btn-ghost { background-color: #fff; color: #17222E; border: 1.5px solid rgba(23, 34, 46, .14); box-shadow: 0 10px 24px -16px rgba(23, 34, 46, .5); }
.btn-ghost:hover { transform: translateY(-2px); border-color: rgba(187, 96, 29, .55); color: #BB601D; box-shadow: 0 18px 34px -18px rgba(23, 34, 46, .45); }

/* ---------- Icon tile ------------------------------------------ */
.tile { display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; transition: background .4s ease, color .4s ease, transform .4s cubic-bezier(.16,1,.3,1); }
.tile-brand { background: linear-gradient(135deg, #FFEBDB, #FFD6B8); color: #9C4C17; }
.tile-teal  { background: linear-gradient(135deg, #CFF5F1, #A3EBE4); color: #0F6A67; }
.tile-gold  { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #B45309; }

/* ---------- Sticky header --------------------------------------- */
#site-header { transition: box-shadow .35s ease, background-color .35s ease, backdrop-filter .35s ease; }
#site-header.is-scrolled { box-shadow: 0 12px 34px -22px rgba(23, 34, 46, .5); backdrop-filter: saturate(150%) blur(12px); background-color: rgba(255, 255, 255, .88); }

/* ---------- Navigation dropdown ----------------------------------- */
.nav-drop { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.group:hover .nav-drop, .group:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-chev { transition: transform .25s ease; }
.group:hover .nav-chev { transform: rotate(180deg); }

/* ---------- Timeline rail ---------------------------------------- */
.rail::before {
  content: '';
  position: absolute;
  left: 19px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, #BB601D 0%, #E87329 40%, #F59E0B 100%);
  opacity: .35;
}

/* ---------- Testimonial quote ------------------------------------ */
.quote-mark { font-family: 'Fraunces', serif; line-height: .6; }

/* ---------- Form fields ------------------------------------------ */
.field {
  width: 100%;
  border-radius: 14px;
  border: 1.5px solid rgba(23, 34, 46, .13);
  background: #fff;
  padding: .78rem 1rem;
  font-size: .95rem;
  color: #17222E;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field:focus { outline: none; border-color: #BB601D; box-shadow: 0 0 0 4px rgba(187, 96, 29, .13); }
.field::placeholder { color: #9AA7B4; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2368798C'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' stroke='%2368798C' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.15rem; padding-right: 2.4rem; }

/* ---------- Scrollbar --------------------------------------------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #FFF1E4; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #E87329, #BB601D); border-radius: 9999px; border: 3px solid #FFF1E4; }

/* ---------- Print -------------------------------------------------- */
@media print {
  #site-header, footer, .no-print { display: none !important; }
  body { background: #fff; }
}