/* Equipio Tech Ltd — shared site styles
   Colour tokens are RGB triplets so Tailwind can apply opacity (e.g. bg-primary/20).
   Light values come from the original Stitch design; dark values are redefined below. */
:root {
  --c-surface: 248 249 255;
  --c-surface-container-lowest: 255 255 255;
  --c-surface-container-low: 239 244 255;
  --c-surface-container: 229 238 255;
  --c-surface-container-high: 220 233 255;
  --c-surface-container-highest: 211 228 254;
  --c-on-surface: 11 28 48;
  --c-on-surface-variant: 68 70 83;
  --c-secondary: 86 94 116;
  --c-outline: 117 118 132;
  --c-outline-variant: 196 197 213;
  --c-primary: 0 40 142;
  --c-primary-container: 30 64 175;
  --c-on-primary: 255 255 255;
  --c-primary-fixed: 221 225 255;
  --c-secondary-fixed: 218 226 253;
  --c-tertiary-fixed: 204 229 255;
  --c-error: 186 26 26;
  --c-error-container: 255 218 214;
  --c-on-error-container: 147 0 10;
  --c-success: 4 120 87;
  --c-success-container: 236 253 245;
  --btn-bg: 30 64 175;
  --btn-bg-hover: 0 40 142;
  color-scheme: light;
}
html.dark {
  --c-surface: 10 17 30;
  --c-surface-container-lowest: 15 23 40;
  --c-surface-container-low: 18 28 47;
  --c-surface-container: 22 34 56;
  --c-surface-container-high: 29 43 70;
  --c-surface-container-highest: 36 52 84;
  --c-on-surface: 230 237 247;
  --c-on-surface-variant: 180 191 208;
  --c-secondary: 154 166 187;
  --c-outline: 138 147 166;
  --c-outline-variant: 51 65 92;
  --c-primary: 157 177 255;
  --c-primary-container: 59 91 219;
  --c-on-primary: 255 255 255;
  --c-primary-fixed: 30 50 120;
  --c-secondary-fixed: 40 55 90;
  --c-tertiary-fixed: 30 70 110;
  --c-error: 255 138 128;
  --c-error-container: 70 20 20;
  --c-on-error-container: 255 205 200;
  --c-success: 52 211 153;
  --c-success-container: 6 46 34;
  --btn-bg: 59 91 219;
  --btn-bg-hover: 79 110 236;
  color-scheme: dark;
}

html, body { margin: 0; padding: 0; }
body { background: rgb(var(--c-surface)); color: rgb(var(--c-on-surface)); transition: background-color .3s ease, color .3s ease; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; display: inline-block; width: 1em; height: 1em; overflow: hidden; white-space: nowrap; flex-shrink: 0; }
[x-cloak], .is-hidden { display: none !important; }

/* Skip link */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; background: rgb(var(--btn-bg)); color: #fff; padding: .5rem 1rem; border-radius: .25rem; font-weight: 600; }
.skip-link:focus { top: .75rem; }

/* ---------- Loading animation (preloader) ---------- */
.preloader { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: rgb(var(--c-surface)); transition: opacity .45s ease, visibility .45s ease; }
.preloader.is-done { opacity: 0; visibility: hidden; }
/* Safety net: hide even if JavaScript never runs */
.preloader { animation: preloaderOut .4s ease 3s forwards; }
@keyframes preloaderOut { to { opacity: 0; visibility: hidden; } }
.preloader-mark { width: 56px; height: 56px; animation: preloadPulse 1.2s ease-in-out infinite; }
.preloader-bar { width: 120px; height: 3px; border-radius: 9999px; background: rgb(var(--c-surface-container-high)); overflow: hidden; }
.preloader-bar::after { content: ''; display: block; width: 40%; height: 100%; background: rgb(var(--btn-bg)); border-radius: inherit; animation: preloadSlide 1s ease-in-out infinite; }
@keyframes preloadPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .7; } }
@keyframes preloadSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---------- Scroll progress bar ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 120; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgb(var(--btn-bg)), #60a5fa); pointer-events: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .65rem 1.4rem; border-radius: .25rem; font-family: Inter, sans-serif; font-weight: 600; font-size: 15px; line-height: 20px; transition: background-color .25s ease, box-shadow .25s ease, transform .2s ease, border-color .25s ease, color .25s ease; text-decoration: none; cursor: pointer; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgb(var(--btn-bg) / .45); outline-offset: 2px; }
.btn-primary { background: rgb(var(--btn-bg)); color: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.btn-primary:hover { background: rgb(var(--btn-bg-hover)); box-shadow: 0 10px 20px -6px rgb(var(--btn-bg) / .45); }
.btn-secondary { background: rgb(var(--c-surface-container-lowest)); color: rgb(var(--c-primary)); border: 1px solid rgb(var(--c-outline-variant) / .7); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.btn-secondary:hover { background: rgb(var(--c-surface-container-low)); border-color: rgb(var(--c-primary) / .5); box-shadow: 0 8px 16px -8px rgba(15,23,42,.18); }
.btn-ghost-light { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn-ghost-light:hover { background: rgba(255,255,255,.18); }
.btn-sm { min-height: 38px; padding: .45rem 1rem; font-size: 13px; }
.btn[disabled] { opacity: .7; cursor: progress; transform: none; }

/* Button sheen */
.btn-sheen { position: relative; overflow: hidden; }
.btn-sheen::after { content: ''; position: absolute; top: -50%; left: -70%; width: 50%; height: 200%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); transform: skewX(-20deg); pointer-events: none; opacity: 0; }
.btn-sheen:hover::after { opacity: 1; animation: shineSweep .9s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes shineSweep { 0% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }

/* Spinner inside buttons */
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Ambient + entrance animations (from Stitch design) ---------- */
@keyframes float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-16px) scale(1.05); } }
@keyframes ambientDrift1 { 0%,100% { transform: translate(0,0) scale(1); opacity: .4; } 50% { transform: translate(32px,-24px) scale(1.12); opacity: .65; } }
@keyframes ambientDrift2 { 0%,100% { transform: translate(0,0) scale(1); opacity: .35; } 50% { transform: translate(-28px,26px) scale(1.08); opacity: .55; } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(22px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.animate-ambient-1 { animation: ambientDrift1 14s ease-in-out infinite; }
.animate-ambient-2 { animation: ambientDrift2 18s ease-in-out infinite; }
.animate-fade-in-up { opacity: 0; animation: fadeInUp .75s cubic-bezier(.16,1,.3,1) forwards; }
.animate-fade-in { animation: fadeIn .6s ease-out forwards; }
.stagger-1 { transition-delay: 80ms; animation-delay: 80ms; }
.stagger-2 { transition-delay: 160ms; animation-delay: 160ms; }
.stagger-3 { transition-delay: 240ms; animation-delay: 240ms; }
.stagger-4 { transition-delay: 320ms; animation-delay: 320ms; }
.stagger-5 { transition-delay: 400ms; animation-delay: 400ms; }

.reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.reveal-on-scroll.is-revealed { opacity: 1; transform: none; }
.no-js .reveal-on-scroll { opacity: 1; transform: none; }

/* Hero shader canvas only suits the light theme */
html.dark .hero-shader { display: none; }

/* ---------- Cards & hover states ---------- */
.card { background: rgb(var(--c-surface-container-lowest)); border: 1px solid rgb(var(--c-outline-variant) / .45); border-radius: .5rem; box-shadow: 0 1px 3px rgba(15,23,42,.05); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; }
.card-hover:hover { transform: translateY(-5px); border-color: rgb(var(--c-primary) / .55); box-shadow: 0 20px 30px -12px rgba(15,23,42,.18); }
.spotlight-card { position: relative; }
.spotlight-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(480px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgb(var(--c-primary) / .08), transparent 70%); opacity: 0; pointer-events: none; transition: opacity .35s ease; z-index: 1; }
.spotlight-card:hover::before { opacity: 1; }
.card-accent-line { overflow: hidden; }
.card-accent-line::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, rgb(var(--btn-bg)), #60a5fa); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.card-accent-line:hover::after { transform: scaleX(1); }
.icon-chip { width: 3rem; height: 3rem; border-radius: .375rem; display: flex; align-items: center; justify-content: center; background: rgb(var(--c-surface-container-high)); color: rgb(var(--c-primary)); transition: all .3s ease; }
.group:hover .icon-chip { background: rgb(var(--btn-bg)); color: #fff; transform: scale(1.08) rotate(1deg); }

/* Text links */
.link { color: rgb(var(--c-primary)); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(var(--c-primary) / .35); text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
.link:hover { text-decoration-color: rgb(var(--c-primary)); }
.arrow-link { display: inline-flex; align-items: center; gap: .25rem; color: rgb(var(--c-primary)); font-weight: 600; }
.arrow-link .material-symbols-outlined { transition: transform .2s ease; font-size: 18px; }
.arrow-link:hover .material-symbols-outlined { transform: translateX(4px); }

/* Nav underline */
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; left: .75rem; right: .75rem; bottom: .2rem; height: 2px; border-radius: 9999px; background: rgb(var(--c-primary)); transform: scaleX(0); transition: transform .25s cubic-bezier(.16,1,.3,1); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* Desktop services dropdown */
.dropdown-panel { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel, .dropdown.is-open .dropdown-panel { opacity: 1; visibility: visible; transform: none; }

/* ---------- Mobile menu ---------- */
.mobile-menu { position: fixed; inset: 0; z-index: 150; visibility: hidden; }
.mobile-menu.is-open { visibility: visible; }
.mobile-menu-backdrop { position: absolute; inset: 0; background: rgba(5,10,20,.5); opacity: 0; transition: opacity .3s ease; }
.mobile-menu.is-open .mobile-menu-backdrop { opacity: 1; }
.mobile-menu-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 360px); background: rgb(var(--c-surface-container-lowest)); transform: translateX(100%); transition: transform .35s cubic-bezier(.16,1,.3,1); overflow-y: auto; display: flex; flex-direction: column; }
.mobile-menu.is-open .mobile-menu-panel { transform: none; }
body.menu-open { overflow: hidden; }

/* ---------- Rich tooltips ---------- */
.rtip { position: relative; display: inline; border-bottom: 1.5px dotted transparent; cursor: help; color: inherit; font: inherit; background: none; padding: 0; transition: border-color .2s ease; }
.rtip:hover, .rtip:focus, .rtip.is-open { border-bottom-color: rgb(var(--c-primary) / .7); }
.rtip:focus-visible { outline: 2px solid rgb(var(--c-primary) / .5); outline-offset: 2px; border-radius: 2px; }
.rtip-card { position: absolute; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: 280px; transform: translate(-50%, 6px); z-index: 60; padding: .75rem .9rem; border-radius: .5rem; background: rgb(var(--c-on-surface)); color: rgb(var(--c-surface)); font-size: 13px; line-height: 18px; font-weight: 400; text-align: left; box-shadow: 0 16px 30px -10px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s; pointer-events: none; white-space: normal; }
.rtip-card strong { display: flex; align-items: center; gap: .35rem; font-size: 13px; font-weight: 700; margin-bottom: .2rem; }
.rtip-card::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgb(var(--c-on-surface)); }
.rtip:hover .rtip-card, .rtip:focus .rtip-card, .rtip.is-open .rtip-card { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.rtip.align-left .rtip-card { left: 0; transform: translate(0, 6px); }
.rtip.align-left:hover .rtip-card, .rtip.align-left:focus .rtip-card, .rtip.align-left.is-open .rtip-card { transform: translate(0,0); }
.rtip.align-left .rtip-card::after { left: 1.25rem; }

/* ---------- Forms ---------- */
.field-label { display: block; font-size: 13px; line-height: 16px; font-weight: 500; color: rgb(var(--c-on-surface)); margin-bottom: .35rem; }
.field-label .req { color: rgb(var(--c-error)); }
.field { width: 100%; background: rgb(var(--c-surface-container-lowest)); color: rgb(var(--c-on-surface)); border: 1px solid rgb(var(--c-outline-variant)); border-radius: .25rem; padding: .6rem .9rem; font-size: 15px; line-height: 22px; transition: border-color .2s ease, box-shadow .2s ease; }
.field::placeholder { color: rgb(var(--c-outline)); }
.field:hover { border-color: rgb(var(--c-outline)); }
.field:focus { outline: none; border-color: rgb(var(--c-primary)); box-shadow: 0 0 0 4px rgb(var(--c-primary) / .15); }
.field[aria-invalid="true"] { border-color: rgb(var(--c-error)); box-shadow: 0 0 0 3px rgb(var(--c-error) / .12); }
.field-error { display: flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: 13px; color: rgb(var(--c-error)); }
.field-error .material-symbols-outlined { font-size: 16px; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23757684' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.5rem; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.alert { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border-radius: .5rem; border: 1px solid; }
.alert-error { background: rgb(var(--c-error-container)); color: rgb(var(--c-on-error-container)); border-color: rgb(var(--c-error) / .35); }
.alert-success { background: rgb(var(--c-success-container)); color: rgb(var(--c-success)); border-color: rgb(var(--c-success) / .35); }
.alert ul { list-style: disc; padding-left: 1.1rem; margin-top: .25rem; }

/* ---------- FAQ accordion ---------- */
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon { transition: transform .25s ease; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item[open] summary { color: rgb(var(--c-primary)); }

/* ---------- Floating UI: back to top, sticky mobile CTA, cookie banner ---------- */
.back-to-top { position: fixed; right: 1rem; bottom: 1.25rem; z-index: 90; width: 46px; height: 46px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgb(var(--btn-bg)); color: #fff; box-shadow: 0 10px 24px -8px rgba(15,23,42,.45); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: rgb(var(--btn-bg-hover)); transform: translateY(-3px); }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex; gap: .5rem; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background: rgb(var(--c-surface-container-lowest) / .97); backdrop-filter: blur(10px); border-top: 1px solid rgb(var(--c-outline-variant) / .6); box-shadow: 0 -6px 20px -10px rgba(15,23,42,.25); transform: translateY(110%); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { flex: 1; }
@media (max-width: 767px) {
  .back-to-top { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.has-sticky-cta footer { padding-bottom: 72px; }
}
@media (min-width: 768px) { .sticky-cta { display: none; } }

.cookie-banner { position: fixed; z-index: 140; left: 1rem; right: 1rem; bottom: 1rem; max-width: 560px; margin-left: auto; padding: 1.25rem; border-radius: .75rem; background: rgb(var(--c-surface-container-lowest)); border: 1px solid rgb(var(--c-outline-variant) / .7); box-shadow: 0 24px 40px -12px rgba(15,23,42,.35); transform: translateY(20px); opacity: 0; visibility: hidden; transition: all .35s cubic-bezier(.16,1,.3,1); }
.cookie-banner.is-visible { transform: none; opacity: 1; visibility: visible; }

/* ---------- Prose for legal pages ---------- */
.prose-legal { color: rgb(var(--c-on-surface-variant)); font-size: 15px; line-height: 1.7; }
.prose-legal h2 { color: rgb(var(--c-on-surface)); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; line-height: 28px; font-weight: 700; margin: 2.25rem 0 .75rem; scroll-margin-top: 140px; }
.prose-legal h3 { color: rgb(var(--c-on-surface)); font-weight: 600; font-size: 16px; margin: 1.25rem 0 .5rem; }
.prose-legal p { margin: 0 0 1rem; }
.prose-legal ul, .prose-legal ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose-legal ul { list-style: disc; } .prose-legal ol { list-style: decimal; }
.prose-legal li { margin: .3rem 0; }
.prose-legal a { color: rgb(var(--c-primary)); text-decoration: underline; text-underline-offset: 3px; }
.prose-legal strong { color: rgb(var(--c-on-surface)); }
.prose-legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 14px; }
.prose-legal th, .prose-legal td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid rgb(var(--c-outline-variant) / .7); vertical-align: top; }
.prose-legal th { color: rgb(var(--c-on-surface)); background: rgb(var(--c-surface-container-low)); font-weight: 600; }
.table-wrap { overflow-x: auto; }

/* Theme toggle icon swap */
.theme-toggle .icon-dark { display: none; }
html.dark .theme-toggle .icon-light { display: none; }
html.dark .theme-toggle .icon-dark { display: inline-block; }

/* Hide scrollbars like the original design but keep scrolling */
::selection { background: rgb(var(--c-primary-fixed)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal-on-scroll, .animate-fade-in-up { opacity: 1 !important; transform: none !important; }
  .preloader { display: none; }
}