/* ==========================================================================
   Fast Track Landing Page Styles
   ==========================================================================
   Hand-written Tailwind utility classes + custom animations/components
   for the USI Fast Track drone pilot training landing page.

   IMPORTANT: Tailwind's preflight/reset is intentionally NOT included here
   to avoid breaking the parent HubSpot theme's header and footer (BEM CSS).

   All rules are scoped inside .ft-page to prevent style bleeding.
   ========================================================================== */


/* ==========================================================================
   1. SCOPED RESET & BASE
   ========================================================================== */

.ft-page,
.ft-page *,
.ft-page *::before,
.ft-page *::after {
  box-sizing: border-box;
}

.ft-page {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

.ft-page img,
.ft-page video {
  max-width: 100%;
  height: auto;
}


/* ==========================================================================
   2. LAYOUT / DISPLAY
   ========================================================================== */

.ft-page .block        { display: block; }
.ft-page .inline-block { display: inline-block; }
.ft-page .inline-flex  { display: inline-flex; }
.ft-page .flex         { display: flex; }
.ft-page .grid         { display: grid; }
.ft-page .hidden       { display: none; }
.ft-page .relative     { position: relative; }
.ft-page .absolute     { position: absolute; }
.ft-page .fixed        { position: fixed; }
.ft-page .sticky       { position: sticky; }

.ft-page .inset-0   { top: 0; right: 0; bottom: 0; left: 0; }
.ft-page .top-0     { top: 0; }
.ft-page .right-0   { right: 0; }
.ft-page .bottom-0  { bottom: 0; }
.ft-page .left-0    { left: 0; }
.ft-page .top-20    { top: 5rem; }
.ft-page .top-40    { top: 10rem; }
.ft-page .left-4    { left: 1rem; }
.ft-page .left-8    { left: 2rem; }
.ft-page .left-10   { left: 2.5rem; }
.ft-page .right-4   { right: 1rem; }
.ft-page .right-8   { right: 2rem; }
.ft-page .right-20  { right: 5rem; }
.ft-page .bottom-4  { bottom: 1rem; }
.ft-page .bottom-8  { bottom: 2rem; }
.ft-page .-bottom-20 { bottom: -5rem; }


/* ==========================================================================
   3. SIZING
   ========================================================================== */

/* Width */
.ft-page .w-full    { width: 100%; }
.ft-page .w-auto    { width: auto; }
.ft-page .w-px      { width: 1px; }
.ft-page .w-3       { width: 0.75rem; }
.ft-page .w-8       { width: 2rem; }
.ft-page .w-10      { width: 2.5rem; }
.ft-page .w-12      { width: 3rem; }
.ft-page .w-14      { width: 3.5rem; }
.ft-page .w-16      { width: 4rem; }
.ft-page .w-20      { width: 5rem; }
.ft-page .w-1\/2    { width: 50%; }

/* Height */
.ft-page .h-2       { height: 0.5rem; }
.ft-page .h-3       { height: 0.75rem; }
.ft-page .h-10      { height: 2.5rem; }
.ft-page .h-12      { height: 3rem; }
.ft-page .h-14      { height: 3.5rem; }
.ft-page .h-16      { height: 4rem; }
.ft-page .h-20      { height: 5rem; }
.ft-page .h-60      { height: 15rem; }
.ft-page .h-64      { height: 16rem; }
.ft-page .h-full    { height: 100%; }
.ft-page .h-auto    { height: auto; }
.ft-page .h-10      { height: 2.5rem; }

/* Min-height */
.ft-page .min-h-screen { min-height: 100vh; }
.ft-page .min-w-0      { min-width: 0; }

/* Max-width */
.ft-page .max-w-md    { max-width: 28rem; }
.ft-page .max-w-sm    { max-width: 24rem; }
.ft-page .max-w-xl    { max-width: 36rem; }
.ft-page .max-w-2xl   { max-width: 42rem; }
.ft-page .max-w-3xl   { max-width: 48rem; }
.ft-page .max-w-4xl   { max-width: 56rem; }
.ft-page .max-w-6xl   { max-width: 72rem; }
.ft-page .max-w-7xl   { max-width: 80rem; }


/* ==========================================================================
   4. SPACING
   ========================================================================== */

/* Padding */
.ft-page .p-4   { padding: 1rem; }
.ft-page .p-5   { padding: 1.25rem; }
.ft-page .p-6   { padding: 1.5rem; }
.ft-page .p-8   { padding: 2rem; }
.ft-page .px-3  { padding-left: 0.75rem; padding-right: 0.75rem; }
.ft-page .px-4  { padding-left: 1rem; padding-right: 1rem; }
.ft-page .px-5  { padding-left: 1.25rem; padding-right: 1.25rem; }
.ft-page .px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.ft-page .px-8  { padding-left: 2rem; padding-right: 2rem; }
.ft-page .py-1  { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.ft-page .py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.ft-page .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.ft-page .py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.ft-page .py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.ft-page .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.ft-page .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.ft-page .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.ft-page .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.ft-page .py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.ft-page .pt-0  { padding-top: 0; }
.ft-page .pt-1  { padding-top: 0.25rem; }
.ft-page .pt-4  { padding-top: 1rem; }
.ft-page .pt-28 { padding-top: 7rem; }
.ft-page .pb-6  { padding-bottom: 1.5rem; }
.ft-page .pb-8  { padding-bottom: 2rem; }
.ft-page .pl-12 { padding-left: 3rem; }
.ft-page .pr-0  { padding-right: 0; }

/* Margin */
.ft-page .m-0    { margin: 0; }
.ft-page .mx-0   { margin-left: 0; margin-right: 0; }
.ft-page .mx-1   { margin-left: 0.25rem; margin-right: 0.25rem; }
.ft-page .mx-auto { margin-left: auto; margin-right: auto; }
.ft-page .my-0   { margin-top: 0; margin-bottom: 0; }
.ft-page .mt-0   { margin-top: 0; }
.ft-page .mt-1   { margin-top: 0.25rem; }
.ft-page .mt-2   { margin-top: 0.5rem; }
.ft-page .mt-3   { margin-top: 0.75rem; }
.ft-page .mt-4   { margin-top: 1rem; }
.ft-page .mt-8   { margin-top: 2rem; }
.ft-page .mt-12  { margin-top: 3rem; }
.ft-page .mb-1   { margin-bottom: 0.25rem; }
.ft-page .mb-2   { margin-bottom: 0.5rem; }
.ft-page .mb-3   { margin-bottom: 0.75rem; }
.ft-page .mb-4   { margin-bottom: 1rem; }
.ft-page .mb-6   { margin-bottom: 1.5rem; }
.ft-page .mb-8   { margin-bottom: 2rem; }
.ft-page .mb-10  { margin-bottom: 2.5rem; }
.ft-page .mb-12  { margin-bottom: 3rem; }
.ft-page .mb-16  { margin-bottom: 4rem; }
.ft-page .mb-20  { margin-bottom: 5rem; }
.ft-page .ml-1   { margin-left: 0.25rem; }
.ft-page .mr-0   { margin-right: 0; }
.ft-page .-mt-6  { margin-top: -1.5rem; }


/* ==========================================================================
   5. TYPOGRAPHY
   ========================================================================== */

/* Font Size */
.ft-page .text-xs   { font-size: 0.75rem; line-height: 1rem; }
.ft-page .text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.ft-page .text-base { font-size: 1rem; line-height: 1.5rem; }
.ft-page .text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.ft-page .text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
.ft-page .text-2xl  { font-size: 1.5rem; line-height: 2rem; }
.ft-page .text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.ft-page .text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
.ft-page .text-5xl  { font-size: 3rem; line-height: 1; }

/* Font Weight */
.ft-page .font-light     { font-weight: 300; }
.ft-page .font-normal    { font-weight: 400; }
.ft-page .font-medium    { font-weight: 500; }
.ft-page .font-semibold  { font-weight: 600; }
.ft-page .font-bold      { font-weight: 700; }
.ft-page .font-extrabold { font-weight: 800; }
.ft-page .font-black     { font-weight: 900; }

/* Font Family */
.ft-page .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Line Height */
.ft-page .leading-none    { line-height: 1; }
.ft-page .leading-tight   { line-height: 1.25; }
.ft-page .leading-relaxed { line-height: 1.625; }

/* Letter Spacing */
.ft-page .tracking-tight  { letter-spacing: -0.025em; }
.ft-page .tracking-wider  { letter-spacing: 0.05em; }
.ft-page .tracking-widest { letter-spacing: 0.1em; }

/* Text Transform */
.ft-page .uppercase  { text-transform: uppercase; }
.ft-page .lowercase  { text-transform: lowercase; }

/* Text Align */
.ft-page .text-left   { text-align: left; }
.ft-page .text-center { text-align: center; }
.ft-page .text-right  { text-align: right; }

/* Text Decoration */
.ft-page .underline      { text-decoration-line: underline; }
.ft-page .no-underline   { text-decoration-line: none; }

/* Vertical Align */
.ft-page .align-middle { vertical-align: middle; }

/* Font Variant */
.ft-page .font-variant-numeric-tabular { font-variant-numeric: tabular-nums; }

/* Whitespace / word break */
.ft-page .whitespace-nowrap { white-space: nowrap; }

/* Arbitrary font sizes used in hero */
.ft-page .text-\[3\.4rem\]   { font-size: 3.4rem; }
.ft-page .text-\[3\.3rem\]   { font-size: 3.3rem; }
.ft-page .text-\[3\.47rem\]  { font-size: 3.47rem; }
.ft-page .text-\[3\.57rem\]  { font-size: 3.57rem; }
.ft-page .text-\[4\.75rem\]  { font-size: 4.75rem; }
.ft-page .text-\[5rem\]      { font-size: 5rem; }
.ft-page .text-\[8rem\]      { font-size: 8rem; }
.ft-page .text-\[10rem\]     { font-size: 10rem; }

/* Arbitrary leading used in hero */
.ft-page .leading-\[1\.15\]  { line-height: 1.15; }
.ft-page .leading-\[1\.1\]   { line-height: 1.1; }


/* ==========================================================================
   6. TEXT COLORS
   ========================================================================== */

.ft-page .text-white       { color: #ffffff; }
.ft-page .text-black       { color: #000000; }

/* Slate */
.ft-page .text-slate-300   { color: #cbd5e1; }
.ft-page .text-slate-400   { color: #94a3b8; }
.ft-page .text-slate-500   { color: #64748b; }
.ft-page .text-slate-600   { color: #475569; }
.ft-page .text-slate-700   { color: #334155; }
.ft-page .text-slate-800   { color: #1e293b; }
.ft-page .text-slate-900   { color: #0f172a; }

/* Blue */
.ft-page .text-blue-100    { color: #dbeafe; }
.ft-page .text-blue-200    { color: #bfdbfe; }
.ft-page .text-blue-300    { color: #93c5fd; }
.ft-page .text-blue-400    { color: #60a5fa; }
.ft-page .text-blue-500    { color: #3b82f6; }
.ft-page .text-blue-600    { color: #2563eb; }
.ft-page .text-blue-700    { color: #1d4ed8; }
.ft-page .text-blue-900    { color: #1e3a5f; }

/* Green */
.ft-page .text-green-400   { color: #4ade80; }
.ft-page .text-green-500   { color: #22c55e; }
.ft-page .text-green-600   { color: #16a34a; }

/* Emerald */
.ft-page .text-emerald-600 { color: #059669; }

/* Indigo */
.ft-page .text-indigo-600  { color: #4f46e5; }

/* Cyan */
.ft-page .text-cyan-600    { color: #0891b2; }

/* Yellow */
.ft-page .text-yellow-400  { color: #facc15; }

/* Amber */
.ft-page .text-amber-500   { color: #f59e0b; }

/* Red */
.ft-page .text-red-500     { color: #ef4444; }


/* ==========================================================================
   7. BACKGROUND COLORS & GRADIENTS
   ========================================================================== */

.ft-page .bg-white         { background-color: #ffffff; }
.ft-page .bg-transparent   { background-color: transparent; }

/* Slate */
.ft-page .bg-slate-50      { background-color: #f8fafc; }
.ft-page .bg-slate-100     { background-color: #f1f5f9; }
.ft-page .bg-slate-200     { background-color: #e2e8f0; }
.ft-page .bg-slate-900     { background-color: #0f172a; }

/* Blue */
.ft-page .bg-blue-50       { background-color: #eff6ff; }
.ft-page .bg-blue-100      { background-color: #dbeafe; }
.ft-page .bg-blue-400      { background-color: #60a5fa; }
.ft-page .bg-blue-500      { background-color: #3b82f6; }
.ft-page .bg-blue-600      { background-color: #2563eb; }
.ft-page .bg-blue-700      { background-color: #1d4ed8; }

/* Green */
.ft-page .bg-green-100     { background-color: #dcfce7; }
.ft-page .bg-green-400     { background-color: #4ade80; }
.ft-page .bg-green-500     { background-color: #22c55e; }
.ft-page .bg-green-600     { background-color: #16a34a; }

/* Indigo */
.ft-page .bg-indigo-100    { background-color: #e0e7ff; }
.ft-page .bg-indigo-600    { background-color: #4f46e5; }

/* Cyan */
.ft-page .bg-cyan-100      { background-color: #cffafe; }

/* Emerald */
.ft-page .bg-emerald-600   { background-color: #059669; }

/* Alpha colors */
.ft-page .bg-blue-500\/10  { background-color: rgba(59, 130, 246, 0.1); }
.ft-page .bg-green-500\/10 { background-color: rgba(34, 197, 94, 0.1); }
.ft-page .bg-white\/10     { background-color: rgba(255, 255, 255, 0.1); }
.ft-page .bg-white\/20     { background-color: rgba(255, 255, 255, 0.2); }

/* Gradients */
.ft-page .bg-gradient-to-r   { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.ft-page .bg-gradient-to-l   { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }
.ft-page .bg-gradient-to-t   { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.ft-page .bg-gradient-to-b   { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.ft-page .bg-gradient-to-br  { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.ft-page .bg-gradient-to-tr  { background-image: linear-gradient(to top right, var(--tw-gradient-stops)); }

/* Gradient stops */
.ft-page .from-slate-900    { --tw-gradient-from: #0f172a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15, 23, 42, 0)); }
.ft-page .from-slate-50     { --tw-gradient-from: #f8fafc; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(248, 250, 252, 0)); }
.ft-page .from-blue-600     { --tw-gradient-from: #2563eb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0)); }
.ft-page .from-blue-900\/20 { --tw-gradient-from: rgba(30, 58, 138, 0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(30, 58, 138, 0)); }
.ft-page .from-green-500    { --tw-gradient-from: #22c55e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 197, 94, 0)); }
.ft-page .from-black\/60    { --tw-gradient-from: rgba(0, 0, 0, 0.6); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); }

.ft-page .via-slate-900\/80  { --tw-gradient-stops: var(--tw-gradient-from), rgba(15, 23, 42, 0.8), var(--tw-gradient-to, rgba(15, 23, 42, 0)); }
.ft-page .via-white           { --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to, rgba(255, 255, 255, 0)); }
.ft-page .via-blue-700        { --tw-gradient-stops: var(--tw-gradient-from), #1d4ed8, var(--tw-gradient-to, rgba(29, 78, 216, 0)); }
.ft-page .via-transparent     { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, transparent); }

.ft-page .to-slate-900\/40   { --tw-gradient-to: rgba(15, 23, 42, 0.4); }
.ft-page .to-slate-50        { --tw-gradient-to: #f8fafc; }
.ft-page .to-transparent      { --tw-gradient-to: transparent; }
.ft-page .to-emerald-600      { --tw-gradient-to: #059669; }
.ft-page .to-indigo-600       { --tw-gradient-to: #4f46e5; }


/* ==========================================================================
   8. BORDERS
   ========================================================================== */

.ft-page .border     { border-width: 1px; }
.ft-page .border-0   { border-width: 0; }
.ft-page .border-2   { border-width: 2px; }
.ft-page .border-4   { border-width: 4px; }
.ft-page .border-t   { border-top-width: 1px; }
.ft-page .border-b   { border-bottom-width: 1px; }

/* Border colors */
.ft-page .border-slate-100  { border-color: #f1f5f9; }
.ft-page .border-slate-200  { border-color: #e2e8f0; }
.ft-page .border-slate-50   { border-color: #f8fafc; }
.ft-page .border-blue-300   { border-color: #93c5fd; }
.ft-page .border-blue-400   { border-color: #60a5fa; }
.ft-page .border-white      { border-color: #ffffff; }
.ft-page .border-white\/20  { border-color: rgba(255, 255, 255, 0.2); }
.ft-page .border-white\/40  { border-color: rgba(255, 255, 255, 0.4); }
.ft-page .border-amber-200  { border-color: #fde68a; }
.ft-page .border-slate-200\/80 { border-color: rgba(226, 232, 240, 0.8); }

/* Divide */
.ft-page .divide-y > * + *     { border-top-width: 1px; }
.ft-page .divide-x > * + *     { border-left-width: 1px; }
.ft-page .divide-slate-100 > * + * { border-color: #f1f5f9; }

/* Rounded */
.ft-page .rounded        { border-radius: 0.25rem; }
.ft-page .rounded-lg     { border-radius: 0.5rem; }
.ft-page .rounded-xl     { border-radius: 0.75rem; }
.ft-page .rounded-2xl    { border-radius: 1rem; }
.ft-page .rounded-3xl    { border-radius: 1.5rem; }
.ft-page .rounded-full   { border-radius: 9999px; }

/* Ring */
.ft-page .ring-2              { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width, 0px) var(--tw-ring-offset-color, #fff); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, rgba(59,130,246,0.5)); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.ft-page .ring-blue-400\/25   { --tw-ring-color: rgba(96, 165, 250, 0.25); }


/* ==========================================================================
   9. SHADOWS
   ========================================================================== */

.ft-page .shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.ft-page .shadow     { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.ft-page .shadow-md  { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.ft-page .shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.ft-page .shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.ft-page .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* Colored shadows */
.ft-page .shadow-green-500\/40 { --tw-shadow-color: rgba(34, 197, 94, 0.4); box-shadow: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); }
.ft-page .shadow-green-500\/30 { --tw-shadow-color: rgba(34, 197, 94, 0.3); box-shadow: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); }
.ft-page .shadow-blue-500\/25  { --tw-shadow-color: rgba(59, 130, 246, 0.25); box-shadow: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); }


/* ==========================================================================
   10. FLEXBOX
   ========================================================================== */

.ft-page .flex-col         { flex-direction: column; }
.ft-page .flex-row         { flex-direction: row; }
.ft-page .flex-wrap        { flex-wrap: wrap; }
.ft-page .flex-1           { flex: 1 1 0%; }
.ft-page .flex-shrink-0    { flex-shrink: 0; }
.ft-page .shrink-0         { flex-shrink: 0; }

.ft-page .items-start      { align-items: flex-start; }
.ft-page .items-center     { align-items: center; }
.ft-page .items-end        { align-items: flex-end; }
.ft-page .items-baseline   { align-items: baseline; }

.ft-page .justify-start    { justify-content: flex-start; }
.ft-page .justify-center   { justify-content: center; }
.ft-page .justify-between  { justify-content: space-between; }
.ft-page .justify-around   { justify-content: space-around; }

.ft-page .self-center      { align-self: center; }

.ft-page .gap-1   { gap: 0.25rem; }
.ft-page .gap-2   { gap: 0.5rem; }
.ft-page .gap-3   { gap: 0.75rem; }
.ft-page .gap-4   { gap: 1rem; }
.ft-page .gap-6   { gap: 1.5rem; }
.ft-page .gap-8   { gap: 2rem; }
.ft-page .gap-10  { gap: 2.5rem; }
.ft-page .gap-12  { gap: 3rem; }

/* Space utilities */
.ft-page .space-y-3 > * + * { margin-top: 0.75rem; }
.ft-page .space-y-4 > * + * { margin-top: 1rem; }


/* ==========================================================================
   11. GRID
   ========================================================================== */

.ft-page .grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ft-page .grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ft-page .grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ft-page .grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }


/* ==========================================================================
   12. OVERFLOW
   ========================================================================== */

.ft-page .overflow-hidden  { overflow: hidden; }
.ft-page .overflow-x-hidden { overflow-x: hidden; }
.ft-page .overflow-visible { overflow: visible; }


/* ==========================================================================
   13. Z-INDEX
   ========================================================================== */

.ft-page .z-0   { z-index: 0; }
.ft-page .z-10  { z-index: 10; }
.ft-page .z-20  { z-index: 20; }
.ft-page .z-30  { z-index: 30; }
.ft-page .z-40  { z-index: 40; }
.ft-page .z-50  { z-index: 50; }


/* ==========================================================================
   14. EFFECTS & TRANSITIONS
   ========================================================================== */

.ft-page .opacity-0    { opacity: 0; }
.ft-page .opacity-10   { opacity: 0.1; }
.ft-page .opacity-40   { opacity: 0.4; }
.ft-page .opacity-60   { opacity: 0.6; }
.ft-page .opacity-75   { opacity: 0.75; }
.ft-page .opacity-100  { opacity: 1; }

.ft-page .transition       { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.ft-page .transition-all   { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.ft-page .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.ft-page .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.ft-page .duration-300 { transition-duration: 300ms; }
.ft-page .duration-500 { transition-duration: 500ms; }
.ft-page .duration-700 { transition-duration: 700ms; }

.ft-page .transform    { transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }

.ft-page .scale-105     { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) scaleX(1.05) scaleY(1.05); }
.ft-page .-translate-x-1\/2 { --tw-translate-x: -50%; transform: translateX(-50%); }
.ft-page .-translate-y-1\/2 { --tw-translate-y: -50%; transform: translateY(-50%); }

/* Object fit */
.ft-page .object-cover   { object-fit: cover; }
.ft-page .object-contain { object-fit: contain; }

/* Filter */
.ft-page .blur-xl        { filter: blur(24px); }
.ft-page .grayscale      { filter: grayscale(100%); }
.ft-page .grayscale-0    { filter: grayscale(0); }
.ft-page .fill-current   { fill: currentColor; }

/* Backdrop */
.ft-page .backdrop-blur-sm { backdrop-filter: blur(4px); }
.ft-page .backdrop-blur-md { backdrop-filter: blur(12px); }

/* Appearance */
.ft-page .appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* Accent */
.ft-page .accent-blue-600 { accent-color: #2563eb; }


/* ==========================================================================
   15. CURSOR / SELECTION / MISC
   ========================================================================== */

.ft-page .cursor-pointer    { cursor: pointer; }
.ft-page .select-none       { user-select: none; }
.ft-page .pointer-events-none { pointer-events: none; }

/* Scroll behavior */
.ft-page .scroll-smooth     { scroll-behavior: smooth; }


/* ==========================================================================
   16. TAILWIND ANIMATION UTILITIES
   ========================================================================== */

.ft-page .animate-ping {
  animation: tw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.ft-page .animate-pulse {
  animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.ft-page .animate-bounce {
  animation: tw-bounce 1s infinite;
}

@keyframes tw-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes tw-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
@keyframes tw-bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}


/* ==========================================================================
   17. PSEUDO-CLASS VARIANTS (hover, focus, group-hover)
   ========================================================================== */

.ft-page .hover\:bg-slate-100:hover      { background-color: #f1f5f9; }
.ft-page .hover\:bg-blue-700:hover       { background-color: #1d4ed8; }
.ft-page .hover\:bg-white\/20:hover      { background-color: rgba(255, 255, 255, 0.2); }

.ft-page .hover\:text-blue-400:hover     { color: #60a5fa; }
.ft-page .hover\:text-blue-600:hover     { color: #2563eb; }

.ft-page .hover\:border-blue-300:hover   { border-color: #93c5fd; }
.ft-page .hover\:border-white\/40:hover  { border-color: rgba(255, 255, 255, 0.4); }

.ft-page .hover\:shadow-md:hover         { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }

.ft-page .hover\:grayscale-0:hover       { filter: grayscale(0); }
.ft-page .hover\:opacity-100:hover       { opacity: 1; }

.ft-page .hover\:scale-105:hover         { transform: scale(1.05); }
.ft-page .hover\:translate-x-1:hover     { transform: translateX(0.25rem); }
.ft-page .hover\:underline:hover         { text-decoration-line: underline; }

.ft-page .focus\:outline-none:focus       { outline: 2px solid transparent; outline-offset: 2px; }
.ft-page .focus\:ring-2:focus             { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }

/* Group hover */
.ft-page .group:hover .group-hover\:text-blue-400   { color: #60a5fa; }
.ft-page .group:hover .group-hover\:text-blue-600   { color: #2563eb; }
.ft-page .group:hover .group-hover\:translate-x-1   { transform: translateX(0.25rem); }
.ft-page .group:hover .group-hover\:underline        { text-decoration-line: underline; }


/* ==========================================================================
   18. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ---- sm: 640px ---- */
@media (min-width: 640px) {
  .ft-page .sm\:block        { display: block; }
  .ft-page .sm\:flex         { display: flex; }
  .ft-page .sm\:hidden       { display: none; }
  .ft-page .sm\:flex-row     { flex-direction: row; }
  .ft-page .sm\:items-center { align-items: center; }
  .ft-page .sm\:justify-start { justify-content: flex-start; }
  .ft-page .sm\:gap-8        { gap: 2rem; }
  .ft-page .sm\:gap-12       { gap: 3rem; }
  .ft-page .sm\:text-left    { text-align: left; }
  .ft-page .sm\:px-6         { padding-left: 1.5rem; padding-right: 1.5rem; }
  .ft-page .sm\:mx-0         { margin-left: 0; margin-right: 0; }
  .ft-page .sm\:text-\[3\.3rem\]  { font-size: 3.3rem; }
  .ft-page .sm\:text-\[3\.47rem\] { font-size: 3.47rem; }
  .ft-page .sm\:h-\[400px\]  { height: 400px; }
}

/* ---- md: 768px ---- */
@media (min-width: 768px) {
  .ft-page .md\:block        { display: block; }
  .ft-page .md\:flex         { display: flex; }
  .ft-page .md\:hidden       { display: none; }
  .ft-page .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-page .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-page .md\:flex-row     { flex-direction: row; }
  .ft-page .md\:flex-row-reverse { flex-direction: row-reverse; }
  .ft-page .md\:items-center { align-items: center; }
  .ft-page .md\:justify-start { justify-content: flex-start; }
  .ft-page .md\:justify-end  { justify-content: flex-end; }
  .ft-page .md\:text-left    { text-align: left; }
  .ft-page .md\:text-right   { text-align: right; }
  .ft-page .md\:gap-8        { gap: 2rem; }
  .ft-page .md\:w-1\/2       { width: 50%; }
  .ft-page .md\:h-12         { height: 3rem; }
  .ft-page .md\:pl-0         { padding-left: 0; }
  .ft-page .md\:pl-12        { padding-left: 3rem; }
  .ft-page .md\:pr-12        { padding-right: 3rem; }
  .ft-page .md\:pt-0         { padding-top: 0; }
  .ft-page .md\:ml-0         { margin-left: 0; }
  .ft-page .md\:divide-y-0 > * + * { border-top-width: 0; }
  .ft-page .md\:divide-x > * + *   { border-left-width: 1px; }

  /* md:left-auto / md:right-4 for curriculum-timeline image labels */
  .ft-page .md\:left-auto   { left: auto; }
  .ft-page .md\:right-4     { right: 1rem; }
  .ft-page .md\:left-1\/2   { left: 50%; }
  .ft-page .md\:-translate-x-1\/2 { transform: translateX(-50%); }
}

/* ---- lg: 1024px ---- */
@media (min-width: 1024px) {
  .ft-page .lg\:block        { display: block; }
  .ft-page .lg\:flex         { display: flex; }
  .ft-page .lg\:grid         { display: grid; }
  .ft-page .lg\:hidden       { display: none; }
  .ft-page .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-page .lg\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ft-page .lg\:flex-row     { flex-direction: row; }
  .ft-page .lg\:flex-none    { flex: none; }
  .ft-page .lg\:items-center { align-items: center; }
  .ft-page .lg\:justify-center { justify-content: center; }

  .ft-page .lg\:gap-4        { gap: 1rem; }
  .ft-page .lg\:gap-10       { gap: 2.5rem; }
  .ft-page .lg\:gap-12       { gap: 3rem; }
  .ft-page .lg\:gap-16       { gap: 4rem; }

  .ft-page .lg\:w-5\/12      { width: 41.666667%; }
  .ft-page .lg\:w-7\/12      { width: 58.333333%; }
  .ft-page .lg\:w-\[90\%\]   { width: 90%; }
  .ft-page .lg\:h-screen     { height: 100vh; }
  .ft-page .lg\:h-\[600px\]  { height: 600px; }
  .ft-page .lg\:max-w-xl     { max-width: 36rem; }

  .ft-page .lg\:px-4         { padding-left: 1rem; padding-right: 1rem; }
  .ft-page .lg\:px-8         { padding-left: 2rem; padding-right: 2rem; }
  .ft-page .lg\:p-4          { padding: 1rem; }
  .ft-page .lg\:p-10         { padding: 2.5rem; }
  .ft-page .lg\:py-14        { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .ft-page .lg\:py-20        { padding-top: 5rem; padding-bottom: 5rem; }
  .ft-page .lg\:py-24        { padding-top: 6rem; padding-bottom: 6rem; }
  .ft-page .lg\:pt-24        { padding-top: 6rem; }
  .ft-page .lg\:pb-16        { padding-bottom: 4rem; }

  .ft-page .lg\:mb-6         { margin-bottom: 1.5rem; }
  .ft-page .lg\:mb-8         { margin-bottom: 2rem; }
  .ft-page .lg\:ml-auto      { margin-left: auto; }
  .ft-page .lg\:mt-0         { margin-top: 0; }
  .ft-page .lg\:-mt-10       { margin-top: -2.5rem; }

  .ft-page .lg\:text-sm      { font-size: 0.875rem; line-height: 1.25rem; }
  .ft-page .lg\:text-xl      { font-size: 1.25rem; line-height: 1.75rem; }
  .ft-page .lg\:text-3xl     { font-size: 1.875rem; line-height: 2.25rem; }
  .ft-page .lg\:text-4xl     { font-size: 2.25rem; line-height: 2.5rem; }
  .ft-page .lg\:text-5xl     { font-size: 3rem; line-height: 1; }
  .ft-page .lg\:text-\[4\.75rem\] { font-size: 4.75rem; }
  .ft-page .lg\:text-\[5rem\]     { font-size: 5rem; }
}

/* ---- xl: 1280px ---- */
@media (min-width: 1280px) {
  .ft-page .xl\:-left-44     { left: -11rem; }
  .ft-page .xl\:text-\[10rem\] { font-size: 10rem; }
}


/* ==========================================================================
   19. @KEYFRAMES (custom animations from input.css)
   ========================================================================== */

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fade-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fade-in-scale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%      { transform: translateY(-15px) rotate(1deg); }
}
@keyframes hero-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
  50%      { box-shadow: 0 0 30px rgba(59, 130, 246, 0.25), 0 28px 55px -12px rgba(0, 0, 0, 0.28); }
}
@keyframes text-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes fly-in-left {
  0%   { opacity: 0; transform: translateX(-100px) scale(0.8); filter: blur(10px); }
  100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}
@keyframes fly-in-right {
  0%   { opacity: 0; transform: translateX(150px) rotateY(-15deg) scale(0.9); }
  100% { opacity: 1; transform: translateX(0) rotateY(0deg) scale(1); }
}
@keyframes fly-in-up {
  0%   { opacity: 0; transform: translateY(80px) scale(0.9); filter: blur(5px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes hero-title-reveal {
  0%   { opacity: 0; transform: translateY(60px) skewY(3deg); clip-path: inset(100% 0 0 0); }
  100% { opacity: 1; transform: translateY(0) skewY(0deg); clip-path: inset(0 0 0 0); }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.5); }
  70%  { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes slide-up-fade {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.3)); }
  50%      { filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.5)); }
}
@keyframes bounce-horizontal {
  0%, 100% { transform: translateX(0) translateY(-50%); }
  50%      { transform: translateX(15px) translateY(-50%); }
}
@keyframes float-particle {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.6; }
  25%      { transform: translateY(-20px) translateX(10px) rotate(90deg); opacity: 0.8; }
  50%      { transform: translateY(-10px) translateX(-5px) rotate(180deg); opacity: 0.6; }
  75%      { transform: translateY(-30px) translateX(15px) rotate(270deg); opacity: 0.8; }
}
@keyframes countdown-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes countdown-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
  50%      { box-shadow: 0 0 40px rgba(59, 130, 246, 0.6); }
}
@keyframes number-flip {
  0%   { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes mobile-btn-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3), 0 2px 4px -2px rgba(37, 99, 235, 0.2);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.5), 0 8px 10px -6px rgba(37, 99, 235, 0.3);
  }
}


/* ==========================================================================
   20. CUSTOM ANIMATION UTILITY CLASSES (scoped)
   ========================================================================== */

.ft-page .animate-scroll {
  animation: scroll 40s linear infinite;
}
.ft-page .animate-scroll:hover {
  animation-play-state: paused;
}

.ft-page .hero-float          { animation: hero-float 5s ease-in-out infinite; }
.ft-page .hero-glow           { animation: hero-glow 2.5s ease-in-out infinite; }
.ft-page .fly-in-left         { animation: fly-in-left 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ft-page .fly-in-right        { animation: fly-in-right 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ft-page .fly-in-up           { animation: fly-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ft-page .hero-title-reveal   { animation: hero-title-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ft-page .pop-in              { animation: pop-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ft-page .pulse-glow          { animation: pulse-glow 2s ease-in-out infinite; }
.ft-page .animate-bounce-horizontal { animation: bounce-horizontal 1.5s ease-in-out infinite; }


/* ==========================================================================
   21. SCROLL-TRIGGERED ANIMATIONS (scoped)
   ========================================================================== */

.ft-page .animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.ft-page .animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Directional variants */
.ft-page .animate-fade-up    { transform: translateY(40px); }
.ft-page .animate-fade-down  { transform: translateY(-40px); }
.ft-page .animate-fade-left  { transform: translateX(-40px); }
.ft-page .animate-fade-right { transform: translateX(40px); }
.ft-page .animate-fade-scale { transform: scale(0.95); }

.ft-page .animate-fade-up.is-visible,
.ft-page .animate-fade-down.is-visible  { transform: translateY(0); }
.ft-page .animate-fade-left.is-visible,
.ft-page .animate-fade-right.is-visible { transform: translateX(0); }
.ft-page .animate-fade-scale.is-visible { transform: scale(1); }


/* ==========================================================================
   22. STAGGERED CHILDREN ANIMATIONS (scoped)
   ========================================================================== */

.ft-page .stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ft-page .stagger-children.is-visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: translateY(0); }
.ft-page .stagger-children.is-visible > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.ft-page .stagger-children.is-visible > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.ft-page .stagger-children.is-visible > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.ft-page .stagger-children.is-visible > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.ft-page .stagger-children.is-visible > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }


/* ==========================================================================
   23. STATS BOX ANIMATIONS (scoped)
   ========================================================================== */

.ft-page .stats-box {
  opacity: 0;
  transform: translateY(60px) scale(0.92);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.9s ease;
}
.ft-page .stats-box.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
.ft-page .stats-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.ft-page .stats-box.is-visible .stats-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.ft-page .stats-box.is-visible .stats-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.ft-page .stats-box.is-visible .stats-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }


/* ==========================================================================
   24. COUNTDOWN TIMER STYLES (scoped)
   ========================================================================== */

.ft-page .countdown-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ft-page .countdown-box {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(34, 211, 153, 0.15) 100%);
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
  text-align: center;
  min-width: 60px;
  animation: countdown-glow 3s ease-in-out infinite;
}
.ft-page .countdown-number {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ft-page .countdown-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(147, 197, 253, 0.9);
  margin-top: 2px;
}
.ft-page .countdown-separator {
  font-size: 1.5rem;
  font-weight: bold;
  color: rgba(147, 197, 253, 0.6);
  animation: countdown-pulse 1s ease-in-out infinite;
}
.ft-page .registration-deadline {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: rgba(147, 197, 253, 0.8);
}
.ft-page .registration-deadline strong {
  color: #fbbf24;
}


/* ==========================================================================
   25. TEXT SHIMMER / GRADIENT TEXT (scoped)
   ========================================================================== */

.ft-page .text-shimmer {
  background: linear-gradient(90deg, #60A5FA 0%, #34D399 25%, #A78BFA 50%, #34D399 75%, #60A5FA 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: text-shimmer 3s linear infinite;
}

.ft-page .text-gradient {
  background: linear-gradient(135deg, #60A5FA 0%, #34D399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ==========================================================================
   26. STAGGER DELAY UTILITIES (scoped)
   ========================================================================== */

.ft-page .stagger-1 { animation-delay: 0.1s; }
.ft-page .stagger-2 { animation-delay: 0.2s; }
.ft-page .stagger-3 { animation-delay: 0.3s; }
.ft-page .stagger-4 { animation-delay: 0.4s; }
.ft-page .stagger-5 { animation-delay: 0.5s; }
.ft-page .stagger-6 { animation-delay: 0.6s; }
.ft-page .stagger-7 { animation-delay: 0.7s; }
.ft-page .stagger-8 { animation-delay: 0.8s; }


/* ==========================================================================
   27. TRANSITION DELAY UTILITIES (scoped)
   ========================================================================== */

.ft-page .delay-100 { transition-delay: 100ms !important; }
.ft-page .delay-200 { transition-delay: 200ms !important; }
.ft-page .delay-300 { transition-delay: 300ms !important; }
.ft-page .delay-400 { transition-delay: 400ms !important; }
.ft-page .delay-500 { transition-delay: 500ms !important; }


/* ==========================================================================
   28. CARD HOVER EFFECTS (scoped)
   ========================================================================== */

.ft-page .hover-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ft-page .hover-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}


/* ==========================================================================
   29. CUSTOM RANGE SLIDER (scoped)
   ========================================================================== */

.ft-page input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}
.ft-page input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #3b82f6;
  cursor: pointer;
  margin-top: -10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.1s;
}
.ft-page input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.ft-page input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #475569;
  border-radius: 2px;
}
.ft-page input[type=range]::-moz-range-thumb {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #3b82f6;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.ft-page input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #475569;
  border-radius: 2px;
}


/* ==========================================================================
   30. INDUSTRY TAB ACTIVE STATES (scoped)
   ========================================================================== */

.ft-page .industry-tab.active {
  background-color: #EFF6FF;
  border-color: #3B82F6;
}
.ft-page .industry-tab.active h3 {
  color: #1D4ED8;
}
.ft-page .industry-tab.active .icon-box {
  background-color: #DBEAFE;
  color: #2563EB;
}


/* ==========================================================================
   31. TIMELINE CONNECTOR (scoped)
   ========================================================================== */

.ft-page .timeline-line::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 2px;
  background: #e2e8f0;
  z-index: 0;
}
@media (min-width: 768px) {
  .ft-page .timeline-line::before {
    left: 50%;
    transform: translateX(-50%);
  }
}


/* ==========================================================================
   32. LOGO CAROUSEL FIXES FOR TABLET (scoped)
   ========================================================================== */

@media (min-width: 640px) and (max-width: 1023px) {
  .ft-page .logo-carousel-container .flex.animate-scroll {
    gap: 2rem;
  }
  .ft-page .logo-carousel-container .flex.animate-scroll > div {
    gap: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .ft-page .logo-carousel-container img {
    flex-shrink: 0;
    min-width: 80px;
  }
}


/* ==========================================================================
   33. HUBSPOT FORM OVERRIDES (scoped)
   ========================================================================== */

/* Hide progress bar, reCAPTCHA, legal notices */
.ft-page .hero-form-card-v3 .grecaptcha-badge,
.ft-page .hero-form-card-v3 .hubspot-link__container,
.ft-page .hero-form-card-v3 .hs-form__virality-link,
.ft-page .hero-form-card-v3 .hs-form__progress,
.ft-page .hero-form-card-v3 .hs-form__progress-bar,
.ft-page .hero-form-card-v3 [class*="progress-bar"],
.ft-page .hero-form-card-v3 .multi-step-progress,
.ft-page .hero-form-card-v3 .form-progress,
.ft-page .hero-form-card-v3 .hs-step-indicator,
.ft-page .hero-form-card-v3 .hs-form-step-indicator,
.ft-page .hero-form-card-v3 [class*="step-indicator"],
.ft-page .hero-form-card-v3 .hs_recaptcha,
.ft-page .hero-form-card-v3 .hs-recaptcha,
.ft-page .hero-form-card-v3 [class*="recaptcha"]:not(.custom-recaptcha-notice),
.ft-page .hero-form-card-v3 .legal-consent-container,
.ft-page .hero-form-card-v3 .hs-richtext,
.ft-page .hero-form-card-v3 .hs-form__virality-link-container {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* Tighten up form spacing */
.ft-page .hero-form-card-v3 .hs-form-html,
.ft-page .hero-form-card-v3 .hs-form-frame,
.ft-page .hero-form-card-v3 .hs-form,
.ft-page .hero-form-card-v3 form {
  margin: 0 !important;
  padding: 0 !important;
}
.ft-page .hero-form-card-v3 .hs-form fieldset,
.ft-page .hero-form-card-v3 form fieldset {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}
.ft-page .hero-form-card-v3 .hs-form-field {
  margin-bottom: 6px !important;
}
.ft-page .hero-form-card-v3 .hs-submit,
.ft-page .hero-form-card-v3 .hs_submit,
.ft-page .hero-form-card-v3 .hs-form__actions {
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.ft-page .hero-form-card-v3 .hs-fieldtype-text,
.ft-page .hero-form-card-v3 .hs-fieldtype-email,
.ft-page .hero-form-card-v3 .hs-fieldtype-phonenumber,
.ft-page .hero-form-card-v3 .hs-fieldtype-select {
  margin-bottom: 6px !important;
}
.ft-page .hero-form-card-v3 .input,
.ft-page .hero-form-card-v3 .hs-input {
  margin-bottom: 0 !important;
}
.ft-page .hero-form-card-v3 label {
  margin-bottom: 2px !important;
}

/* Mobile form styling */
@media (max-width: 1023px) {
  .ft-page .hero-form-card-v3 {
    padding: 16px !important;
  }
  .ft-page .hero-form-card-v3 .hs-form-html,
  .ft-page .hero-form-card-v3 .hs-form-html form,
  .ft-page .hero-form-card-v3 .hs-form-html form > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  .ft-page .hero-form-card-v3 form > fieldset,
  .ft-page .hero-form-card-v3 form > fieldset > div,
  .ft-page .hero-form-card-v3 form fieldset,
  .ft-page .hero-form-card-v3 form fieldset > div,
  .ft-page .hero-form-card-v3 .hs-form-html fieldset,
  .ft-page .hero-form-card-v3 .hs-form-html fieldset > div {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  .ft-page .hero-form-card-v3 form fieldset > div > div,
  .ft-page .hero-form-card-v3 .hs-form-html fieldset > div > div {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
    margin-bottom: 12px !important;
  }
  .ft-page .hero-form-card-v3 form input,
  .ft-page .hero-form-card-v3 form select,
  .ft-page .hero-form-card-v3 form textarea,
  .ft-page .hero-form-card-v3 .hs-form-html input,
  .ft-page .hero-form-card-v3 .hs-form-html select,
  .ft-page .hero-form-card-v3 .hs-form-html textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Custom reCAPTCHA notice styling */
.ft-page .custom-recaptcha-notice {
  font-size: 8px;
  color: #94a3b8;
  line-height: 1.3;
  flex: 1;
}
.ft-page .custom-recaptcha-notice a {
  color: #64748b;
  text-decoration: underline;
}
.ft-page .hero-form-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px !important;
}


/* ==========================================================================
   34. HERO FORM CARD STYLED APPEARANCE (scoped)
   ========================================================================== */

.ft-page .hero-form-card-v3 {
  background: linear-gradient(to bottom right, #f8fafc, #eff6ff, #f1f5f9);
  position: relative;
  overflow: hidden;
}
.ft-page .hero-form-card-v3::before {
  content: '';
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 12rem;
  height: 12rem;
  background: linear-gradient(to bottom right, rgba(96, 165, 250, 0.3), rgba(34, 211, 238, 0.2));
  border-radius: 9999px;
  filter: blur(3rem);
}
.ft-page .hero-form-card-v3::after {
  content: '';
  position: absolute;
  bottom: -2.5rem;
  left: -2.5rem;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(to top right, rgba(74, 222, 128, 0.2), rgba(52, 211, 153, 0.1));
  border-radius: 9999px;
  filter: blur(2rem);
}


/* ==========================================================================
   35. MAP TOOLTIP STYLES (scoped)
   ========================================================================== */

.ft-page .map-tooltip {
  display: none;
  position: absolute;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid #e2e8f0;
  padding: 1.25rem;
  width: 280px;
  z-index: 50;
  pointer-events: auto;
}
.ft-page .map-tooltip.active {
  display: block;
}

/* State hover styles are inside the SVG <style> so they don't need scoping */


/* ==========================================================================
   36. MOBILE BUTTON PULSE (scoped)
   ========================================================================== */

@media (max-width: 767px) {
  .ft-page #mobile-enroll-btn.scroll-pulse {
    animation: mobile-btn-pulse 1.5s ease-in-out infinite;
  }
}


/* ==========================================================================
   37. ADDITIONAL UTILITY CLASSES FROM MODULES
   ========================================================================== */

/* Registration CTA background pattern (arbitrary value) */
.ft-page .bg-\[url\(\'https\:\/\/www\.transparenttextures\.com\/patterns\/cubes\.png\'\)\] {
  background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
}

/* Arbitrary heights used in industry-careers */
.ft-page .h-\[320px\]  { height: 320px; }
.ft-page .h-\[400px\]  { height: 400px; }
.ft-page .h-\[600px\]  { height: 600px; }

/* Arbitrary widths */
.ft-page .w-\[200\%\]  { width: 200%; }
.ft-page .w-\[90\%\]   { width: 90%; }

/* Arbitrary negative positioning used in registration-cta arrow */
.ft-page .-left-32     { left: -8rem; }
.ft-page .-left-44     { left: -11rem; }

/* Misc utility classes found in templates */
.ft-page .ml-4  { margin-left: 1rem; }
.ft-page .ml-auto { margin-left: auto; }

/* Group class itself (marker for group-hover) */
.ft-page .group { /* no styles, just a marker */ }