/* =========================================================
   CodeVerox — custom.css
   =========================================================

   ⚠️  TAILWIND CONFIG NOTICE
   ---------------------------------------------------------
   The original index.html had a `tailwind.config` block inside
   a <script> tag. It has been removed here as requested.

   Because the site uses the Tailwind Play CDN
   (https://cdn.tailwindcss.com), the following custom utilities
   will NOT work until you re-add the config. Either:

   (A) Re-add this <script> block in <head> (after the CDN script):

       <script>
         tailwind.config = {
           theme: {
             extend: {
               fontFamily: {
                 sans: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
                 mono: ['"JetBrains Mono"', 'ui-monospace', 'monospace'],
               },
               colors: {
                 brandDark:   '#0A2540',
                 brandTeal:   '#00A8A8',
                 brandLight:  '#F0F4F8',
                 brandAccent: '#E0F2F1'
               },
               boxShadow: {
                 glow: '0 0 40px -8px rgba(0,168,168,.45)',
                 card: '0 1px 2px rgba(10,37,64,.05), 0 12px 32px -12px rgba(10,37,64,.14)',
               },
             },
           },
         }
       </script>

   (B) Or set up a proper Tailwind build and put the same
       object in tailwind.config.js.

   Class names affected: font-sans, font-mono,
   bg-/text-/border-brandDark, *-brandTeal, *-brandLight,
   *-brandAccent, shadow-glow, shadow-card.
   ========================================================= */

/* ─────────────── Base ─────────────── */
:root { --nav-h: 76px; }
html   { scroll-padding-top: 92px; }
body   { -webkit-font-smoothing: antialiased; }

/* ─────────────── Scroll progress bar ─────────────── */
#progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0%;
    background: linear-gradient(90deg, #0A2540, #00A8A8, #33C4C4);
    z-index: 100; transition: width .1s linear;
}

/* ─────────────── Grid backdrop ─────────────── */
.grid-bg {
    background-image:
        linear-gradient(to right,  rgba(0,168,168,.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,168,168,.08) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ─────────────── Scroll reveal ─────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1),
                transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    *       { animation: none !important; }
}

/* ─────────────── Blob drift ─────────────── */
@keyframes drift {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(30px,-24px) scale(1.08); }
    66%     { transform: translate(-24px,20px) scale(.94); }
}
.blob      { animation: drift 16s ease-in-out infinite; }
.blob.b2   { animation-duration: 22s; animation-delay: -6s; }

/* ─────────────── Blinking caret ─────────────── */
@keyframes blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
.caret { animation: blink 1s step-end infinite; }

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

/* ─────────────── Card hover lift ─────────────── */
.lift {
    transition: transform .4s cubic-bezier(.16,1,.3,1),
                box-shadow .4s,
                border-color .3s;
}
.lift:hover { transform: translateY(-6px); }

/* ─────────────── Custom scrollbar ─────────────── */
::-webkit-scrollbar        { width: 10px; }
::-webkit-scrollbar-track  { background: #F0F4F8; }
::-webkit-scrollbar-thumb  {
    background: #CBD5E1;
    border-radius: 99px;
    border: 2px solid #F0F4F8;
}
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ─────────────── Tag utility ─────────────── */
.tag {
    display: inline-block;
    font-size: .75rem;
    font-weight: 500;
    background: #F0F4F8;
    color: #475569;
    padding: .3rem .65rem;
    border-radius: .4rem;
    border: 1px solid #E2E8F0;
}
/* ============================================================
   BRAND UTILITIES
   Recreates what tailwind.config.js theme.extend would normally
   generate. Because output.css is loaded first, these rules
   apply cleanly without touching the Tailwind config.
   ============================================================ */

:root {
  --brand-dark:   10 37 64;      /* #0A2540 */
  --brand-teal:   0 168 168;     /* #00A8A8 */
  --brand-light:  240 244 248;   /* #F0F4F8 */
  --brand-accent: 224 242 241;   /* #E0F2F1 */
}

/* ─── Fonts (overrides Tailwind's stock .font-sans / .font-mono) ─── */
.font-sans {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}
.font-mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ─── Backgrounds ─── */
.bg-brandDark   { background-color: rgb(var(--brand-dark)); }
.bg-brandTeal   { background-color: rgb(var(--brand-teal)); }
.bg-brandLight  { background-color: rgb(var(--brand-light)); }
.bg-brandAccent { background-color: rgb(var(--brand-accent)); }

/* opacity variants used in markup */
.bg-brandTeal\/15 { background-color: rgb(var(--brand-teal) / 0.15); }
.bg-brandTeal\/20 { background-color: rgb(var(--brand-teal) / 0.20); }
.bg-brandTeal\/60 { background-color: rgb(var(--brand-teal) / 0.60); }

/* ─── Text ─── */
.text-brandDark     { color: rgb(var(--brand-dark)); }
.text-brandTeal     { color: rgb(var(--brand-teal)); }
.text-brandTeal\/90 { color: rgb(var(--brand-teal) / 0.90); }

/* ─── Borders ─── */
.border-brandDark { border-color: rgb(var(--brand-dark)); }
.border-brandTeal { border-color: rgb(var(--brand-teal)); }

/* ─── Hover: background ─── */
.hover\:bg-brandDark:hover { background-color: rgb(var(--brand-dark)); }
.hover\:bg-brandTeal:hover { background-color: rgb(var(--brand-teal)); }

/* ─── Hover: text ─── */
.hover\:text-brandDark:hover { color: rgb(var(--brand-dark)); }
.hover\:text-brandTeal:hover { color: rgb(var(--brand-teal)); }

/* ─── Hover: border ─── */
.hover\:border-brandDark:hover     { border-color: rgb(var(--brand-dark)); }
.hover\:border-brandTeal:hover     { border-color: rgb(var(--brand-teal)); }
.hover\:border-brandTeal\/40:hover { border-color: rgb(var(--brand-teal) / 0.40); }

/* ─── Group-hover (service card icon + border swap) ─── */
.group:hover .group-hover\:bg-brandTeal     { background-color: rgb(var(--brand-teal)); }
.group:hover .group-hover\:border-brandTeal { border-color: rgb(var(--brand-teal)); }

/* ─── Gradient stops (needed by bg-gradient-to-r/b) ─── */
.from-brandTeal {
  --tw-gradient-from:   rgb(var(--brand-teal)) var(--tw-gradient-from-position, 0%);
  --tw-gradient-to:     rgb(var(--brand-teal) / 0) var(--tw-gradient-to-position, 100%);
  --tw-gradient-stops:  var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-brandDark {
  --tw-gradient-to: rgb(var(--brand-dark)) var(--tw-gradient-to-position, 100%);
}

/* ─── Selection ─── */
.selection\:bg-brandTeal::selection,
.selection\:bg-brandTeal *::selection {
  background-color: rgb(var(--brand-teal));
  color: #fff;
}

/* ─── Shadows ─── */
.shadow-glow { box-shadow: 0 0 40px -8px rgba(0, 168, 168, .45); }
.shadow-card { box-shadow: 0 1px 2px rgba(10, 37, 64, .05),
                           0 12px 32px -12px rgba(10, 37, 64, .14); }

.hover\:shadow-glow:hover { box-shadow: 0 0 40px -8px rgba(0, 168, 168, .45); }
.hover\:shadow-card:hover { box-shadow: 0 1px 2px rgba(10, 37, 64, .05),
                                        0 12px 32px -12px rgba(10, 37, 64, .14); }


                                        /* ============================================================
   3D SERVICES SECTION
   ============================================================ */

/* Card tilt wrapper */
.svc-tilt {
  transform-style: preserve-3d;
  transform: perspective(1000px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg));
  transition: transform .45s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .svc-tilt:hover { transition: transform .12s linear; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-tilt { transform: none !important; transition: none !important; }
}

/* The card itself */
.svc-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  padding: 1.75rem;
  background: linear-gradient(180deg, #ffffff 0%, #F0F4F8 100%);
  border: 1px solid #E2E8F0;
  box-shadow:
    0 1px 2px rgba(10,37,64,.05),
    0 12px 32px -16px rgba(10,37,64,.14);
  transition: border-color .3s, box-shadow .4s;
  transform-style: preserve-3d;
}

/* Cursor spotlight (follows pointer via --mx/--my set in JS) */
.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0,168,168,.16),
    transparent 65%
  );
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}

/* Faint grid texture that fades from the top */
.svc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(to right,  rgba(10,37,64,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,37,64,.045) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .6;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 75%);
          mask-image: radial-gradient(circle at 50% 0%, #000, transparent 75%);
}

.svc-card:hover {
  border-color: rgba(0,168,168,.55);
  box-shadow:
    0 0 0 1px rgba(0,168,168,.18),
    0 24px 48px -24px rgba(0,168,168,.4);
}
.svc-card:hover::before { opacity: 1; }

/* Ghost number */
.svc-num {
  position: absolute;
  top: .625rem;
  right: 1rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(10,37,64,.06);
  pointer-events: none;
  transform: translateZ(20px);
  transition: color .4s, transform .4s;
}
.svc-card:hover .svc-num {
  color: rgba(0,168,168,.22);
  transform: translateZ(45px) translateY(-3px);
}

/* Icon tile */
.svc-icon {
  position: relative;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .75rem;
  background: #fff;
  border: 1px solid #E2E8F0;
  color: #00A8A8;
  margin-bottom: 1.25rem;
  transform: translateZ(30px);
  transition: transform .4s cubic-bezier(.16,1,.3,1),
              background .3s, color .3s, border-color .3s, box-shadow .4s;
}
.svc-card:hover .svc-icon {
  background: #00A8A8;
  color: #fff;
  border-color: #00A8A8;
  transform: translateZ(55px) translateY(-3px) rotate(-4deg);
  box-shadow: 0 12px 28px -12px rgba(0,168,168,.65);
}

/* Text */
.svc-title {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: #0A2540;
  transform: translateZ(18px);
}
.svc-desc {
  position: relative;
  z-index: 1;
  margin-top: .625rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: #475569;
  transform: translateZ(10px);
}

/* "Explore" link */
.svc-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: 1.25rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #00A8A8;
  transform: translateZ(14px);
}
.svc-link svg { transition: transform .3s; }
.svc-link:hover svg { transform: translateX(4px); }


/* ============================================================
   CUSTOM CURSOR
   Disabled on touch + reduced-motion. Enabled by .cursor-on
   on <html> (set from JS) so we never hide the native cursor
   on devices that can't use it.
   ============================================================ */

#cursor-dot,
#cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}

/* Inner dot — instant, teal, 6px */
#cursor-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #00A8A8;
  box-shadow: 0 0 12px rgba(0,168,168,.9);
  transition: opacity .25s, width .25s, height .25s, background .25s;
}

/* Outer ring — eased lag, 32px, thin navy border */
#cursor-ring {
  width: 32px;
  height: 32px;
  margin-left: -13px;   /* (32 - 6) / 2 — so ring + dot share the same */
  margin-top: -13px;    /* visual center without extra translate math   */
  border: 1.5px solid rgba(10,37,64,.6);
  border-radius: 9999px;
  transition: opacity .25s,
              width .25s, height .25s, margin .25s,
              background .25s, border-color .25s, box-shadow .25s;
}

/* Show once JS confirms pointer is fine-grained */
html.cursor-on #cursor-dot,
html.cursor-on #cursor-ring { opacity: 1; }

/* Hide the native cursor only when custom cursor is active
   AND the device actually has a mouse                          */
html.cursor-on,
html.cursor-on a,
html.cursor-on button,
html.cursor-on [role="button"] { cursor: none; }

/* Keep native text cursor inside text fields (usability) */
html.cursor-on input,
html.cursor-on textarea,
html.cursor-on select,
html.cursor-on [contenteditable="true"] { cursor: text; }

/* ── Hover state: interactive elements ── */
html.cursor-on.cursor-hover #cursor-ring {
  width: 52px;
  height: 52px;
  margin-left: -23px;
  margin-top: -23px;
  background: rgba(0,168,168,.12);
  border-color: rgba(0,168,168,.9);
  box-shadow: 0 0 24px rgba(0,168,168,.45);
}
html.cursor-on.cursor-hover #cursor-dot {
  width: 4px;
  height: 4px;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(0,168,168,1);
}

/* ── Click state ── */
html.cursor-on.cursor-down #cursor-ring {
  transform: translate3d(var(--cx, 0), var(--cy, 0), 0) scale(.85);
}

/* ── Text-select state (over paragraphs / headings) ── */
html.cursor-on.cursor-text #cursor-ring {
  width: 4px;
  height: 28px;
  margin-left: -2px;
  margin-top: -14px;
  border-radius: 2px;
  border-color: rgba(0,168,168,.9);
  background: rgba(0,168,168,.14);
}

/* Reduced motion: skip the lag animation entirely */
@media (prefers-reduced-motion: reduce) {
  #cursor-dot, #cursor-ring { display: none !important; }
  html.cursor-on,
  html.cursor-on a,
  html.cursor-on button { cursor: auto; }
}

/* ============================================================
   PROCESS SECTION
   ============================================================ */

/* Horizontal fill on desktop */
.process-line {
  transition: width 1400ms cubic-bezier(.16, 1, .3, 1);
}

/* Vertical fill on mobile (grows from top) */
.process-line-v {
  transition: transform 1600ms cubic-bezier(.16, 1, .3, 1);
}

/* Reduced motion: show immediately */
@media (prefers-reduced-motion: reduce) {
  .process-line   { transition: none; }
  .process-line-v { transition: none; }
}