/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!../../node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!../../node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Manrope","arguments":[{"subsets":["latin","latin-ext"],"variable":"--font-manrope","display":"swap"}],"variableName":"manrope"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Manrope_481cdf';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/438aa629764e75f3-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Manrope_481cdf';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/875ae681bfde4580-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: '__Manrope_481cdf';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/51251f8b9793cdb3-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__Manrope_481cdf';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/e857b654a2caa584-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Manrope_481cdf';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/cc978ac5ee68c2b6-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Manrope_481cdf';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_next/static/media/4c9affa5bc8f420e-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Manrope_Fallback_481cdf';src: local("Arial");ascent-override: 103.31%;descent-override: 29.07%;line-gap-override: 0.00%;size-adjust: 103.19%
}.__className_481cdf {font-family: '__Manrope_481cdf', '__Manrope_Fallback_481cdf';font-style: normal
}.__variable_481cdf {--font-manrope: '__Manrope_481cdf', '__Manrope_Fallback_481cdf'
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!../../node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!../../node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Plus_Jakarta_Sans","arguments":[{"subsets":["latin","latin-ext"],"variable":"--font-dm-sans","display":"swap","weight":["400","500","600","700","800"]}],"variableName":"plusJakarta"} ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/6fe53d21e6e7ebd8-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/8ebc6e9dde468c4a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/9e7b0a821b9dfcb4-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/636a5ac981f94f8b-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/6fe53d21e6e7ebd8-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/8ebc6e9dde468c4a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/9e7b0a821b9dfcb4-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/636a5ac981f94f8b-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/6fe53d21e6e7ebd8-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/8ebc6e9dde468c4a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/9e7b0a821b9dfcb4-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/636a5ac981f94f8b-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/6fe53d21e6e7ebd8-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/8ebc6e9dde468c4a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/9e7b0a821b9dfcb4-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/636a5ac981f94f8b-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/6fe53d21e6e7ebd8-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/8ebc6e9dde468c4a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/9e7b0a821b9dfcb4-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Plus_Jakarta_Sans_383dac';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/636a5ac981f94f8b-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Plus_Jakarta_Sans_Fallback_383dac';src: local("Arial");ascent-override: 98.88%;descent-override: 21.15%;line-gap-override: 0.00%;size-adjust: 104.98%
}.__className_383dac {font-family: '__Plus_Jakarta_Sans_383dac', '__Plus_Jakarta_Sans_Fallback_383dac';font-style: normal
}.__variable_383dac {--font-dm-sans: '__Plus_Jakarta_Sans_383dac', '__Plus_Jakarta_Sans_Fallback_383dac'
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.left-0 {
  left: 0px;
}
.right-0 {
  right: 0px;
}
.top-0 {
  top: 0px;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-8 {
  height: 2rem;
}
.min-h-screen {
  min-height: 100vh;
}
.w-12 {
  width: 3rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-8 {
  width: 2rem;
}
.w-full {
  width: 100%;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.shrink-0 {
  flex-shrink: 0;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.flex-col {
  flex-direction: column;
}
.place-items-center {
  place-items: center;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-7 {
  gap: 1.75rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 20px;
}
.rounded-md {
  border-radius: 12px;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-border {
  border-color: rgba(255,255,255,0.07);
}
.bg-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(22 11 20 / var(--tw-bg-opacity, 1));
}
.bg-bg-card {
  --tw-bg-opacity: 1;
  background-color: rgb(30 16 25 / var(--tw-bg-opacity, 1));
}
.bg-bg-el {
  --tw-bg-opacity: 1;
  background-color: rgb(52 30 46 / var(--tw-bg-opacity, 1));
}
.p-2 {
  padding: 0.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.text-center {
  text-align: center;
}
.font-body {
  font-family: var(--font-dm-sans), sans-serif;
}
.font-display {
  font-family: var(--font-manrope), sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.text-purple {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.text-purple-light {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-text {
  --tw-text-opacity: 1;
  color: rgb(251 243 236 / var(--tw-text-opacity, 1));
}
.text-text-muted {
  --tw-text-opacity: 1;
  color: rgb(185 166 174 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.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;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.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;
}
.duration-200 {
  transition-duration: 200ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

:root {
  /* ═══════════════════════════════════════════════════════
     SUNSET HORIZON — warm twilight palette
     violet sky → rose horizon → amber sun.
     ═══════════════════════════════════════════════════════ */

  /* Warm dark base — plum near-black */
  --bg: #160B14;        /* page background */
  --bg-card: #1E1019;   /* lifted surface — cards */
  --bg-c2: #2A1726;     /* hover / secondary surface */
  --bg-el: #341E2E;     /* elevated — inputs, chips */

  /* Brand — violet (twilight sky, primary) */
  --violet: #7C3AED;
  --violet-lt: #A78BFA;
  --violet-ltr: #C9B8FD;
  --v-glow: rgba(124, 58, 237, 0.28);

  /* Brand — rose (horizon band, mid accent) */
  --rose: #FB7185;
  --rose-lt: #FDA4AF;
  --rose-ltr: #FECDD3;
  --r-glow: rgba(251, 113, 133, 0.26);

  /* Brand — amber (sun glow, bright accent) */
  --amber: #F59E0B;
  --amber-lt: #FBBF24;
  --amber-ltr: #FCD34D;
  --am-glow: rgba(245, 158, 11, 0.26);

  /* Signature gradient — the sunset itself */
  --grad-sunset: linear-gradient(135deg, #7C3AED 0%, #FB7185 55%, #F59E0B 100%);
  --grad-cta: var(--grad-sunset);

  /* Legacy aliases — older class blocks still reference these names. */
  --purple: var(--violet);
  --purple-lt: var(--violet-lt);
  --purple-ltr: var(--violet-ltr);
  --p-glow: var(--v-glow);
  --azure: var(--amber);
  --azure-lt: var(--amber-lt);
  --azure-ltr: var(--amber-ltr);
  --a-glow: var(--am-glow);

  /* Semantic — errors get a distinct red (rose is now a brand color) */
  --err: #EF4444;
  --err-glow: rgba(239, 68, 68, 0.14);
  --coral: var(--err);          /* legacy alias — destructive states */
  --coral-lt: #F87171;
  --green: #4ADE80;
  --gold: var(--amber);
  --blue: var(--violet);
  --blue-lt: var(--violet-lt);
  --cyan: var(--rose);

  /* Text — warm off-white on dark */
  --t: #FBF3EC;
  --t2: #B9A6AE;
  --t3: #84707A;
  --bd: rgba(255, 255, 255, 0.07);
  --bd2: rgba(255, 255, 255, 0.11);

  /* Surfaces — the product is fully dark, so these former "light theme"
     tokens now resolve to warm dark surfaces for the auth/legacy blocks. */
  --ink: #FBF3EC;               /* text on dark (was dark-text-on-light) */
  --deep: #160B14;
  --layer: #2A1726;
  --surf: #160B14;              /* page background */
  --surflow: #1E1019;           /* lifted surface */
  --bdr: rgba(255, 255, 255, 0.09);
  --bdr2: rgba(255, 255, 255, 0.05);
  --t-ink2: rgba(251, 243, 236, 0.58);
  --t-ink3: rgba(251, 243, 236, 0.34);

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--t);
}

::-moz-selection {
  background: var(--p-glow);
  color: var(--purple-lt);
}

::selection {
  background: var(--p-glow);
  color: var(--purple-lt);
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-card);
}

::-webkit-scrollbar-thumb {
  background: var(--purple);
  border-radius: 3px;
}

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════
   LANDING PAGE — Gen Z Redesign (v3)
   ═══════════════════════════════════════════════════════ */

/* Custom cursor */
.land-cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 9px; height: 9px; border-radius: 50%;
  background: #A78BFA; pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: exclusion;
}
.land-cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9998;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(167,139,250,.45);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .28s cubic-bezier(0.34,1.56,0.64,1), height .28s cubic-bezier(0.34,1.56,0.64,1), border-color .2s;
}
.land-cursor-glow {
  position: fixed; top: 0; left: 0; z-index: 9997;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.07), transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.land-hovering .land-cursor-ring { width: 54px; height: 54px; border-color: #7C3AED; }

/* Noise overlay */
.land-noise {
  position: fixed; inset: 0; z-index: 9996;
  pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* Hero word-reveal */
@keyframes land-wrev {
  from { transform: translateY(115%) rotate(5deg); }
  to   { transform: translateY(0) rotate(0); }
}
.land-word { display: inline-block; overflow: hidden; }
.land-word-inner { display: inline-block; animation: land-wrev .85s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Hero fade-up */
@keyframes land-sup {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Badge ripple */
@keyframes land-ripple {
  0%   { transform: scale(.8);  opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
.land-badge-dot { position: relative; }
.land-badge-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  background: rgba(245,158,11,.32); animation: land-ripple 2s ease-out infinite;
}

/* Scroll hint */
@keyframes land-scDrop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Orb float */
@keyframes land-od1 { to { transform: translate(50px, 40px); } }
@keyframes land-od2 { to { transform: translate(-40px, -55px); } }

/* Marquee */
@keyframes land-mqs {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.land-mq-track { display: flex; gap: 60px; width: -moz-max-content; width: max-content; animation: land-mqs 32s linear infinite; }
.land-mq-wrap:hover .land-mq-track { animation-play-state: paused; }

/* Scroll reveals */
.land-ru { opacity: 0; transform: translateY(38px); transition: opacity .8s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.34,1.56,0.64,1); }
.land-rl { opacity: 0; transform: translateX(-38px); transition: opacity .8s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.34,1.56,0.64,1); }
.land-rr { opacity: 0; transform: translateX(38px);  transition: opacity .8s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.34,1.56,0.64,1); }
.land-rs { opacity: 0; transform: scale(.92);         transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.34,1.56,0.64,1); }
.land-ru.land-v, .land-rl.land-v, .land-rr.land-v, .land-rs.land-v { opacity: 1; transform: none; }

/* Bento cards */
.land-bc {
  border-radius: 24px; padding: 40px; overflow: hidden; position: relative;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
  transition: transform .5s cubic-bezier(0.34,1.56,0.64,1), box-shadow .4s, border-color .3s;
  transform-style: preserve-3d; will-change: transform;
}
.land-bc:hover { border-color: rgba(124,58,237,.25); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.land-bc-gl { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .4s; pointer-events: none; }
.land-bc:hover .land-bc-gl { opacity: 1; }

/* Stat pills */
.land-sp {
  display: flex; align-items: center; gap: 20px;
  background: var(--bg-card); border-radius: 20px; padding: 22px 28px;
  border: 1px solid rgba(255,255,255,.06); box-shadow: 0 4px 28px rgba(255,255,255,.06);
  transition: transform .4s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s;
}
.land-sp:hover { transform: translateX(10px); box-shadow: 0 8px 40px rgba(255,255,255,.12); }

/* HIW cards */
.land-hiw-card {
  background: #1E1019; border-radius: 24px; padding: 44px 36px;
  border: 1px solid rgba(255,255,255,.05); position: relative;
  overflow: hidden; transition: transform .4s cubic-bezier(0.34,1.56,0.64,1), border-color .3s;
}
.land-hiw-card:hover { transform: translateY(-8px); border-color: rgba(124,58,237,.2); }
.land-hiw-n { opacity: .3; transition: opacity .3s; }
.land-hiw-card:hover .land-hiw-n { opacity: .7; }

/* Punch cards */
.land-punch {
  padding: 52px 44px; background: #1E1019; position: relative;
  overflow: hidden; transition: background .3s;
}
.land-punch:hover { background: #2A1726; }

/* Nav buttons — cursor: none on landing (pointer devices only) */
.land-page * { cursor: none; }

/* Hide custom cursor on touch/mobile — pointer: coarse = finger input */
@media (pointer: coarse) {
  .land-cursor-dot,
  .land-cursor-ring,
  .land-cursor-glow { display: none !important; }
  .land-page * { cursor: auto !important; }
}

/* ═══════════════════════════════════════════════════════
   HERO — Sunset Horizon
   Twilight sky over a glowing horizon + perspective grid.
   Pure CSS, no image assets.
   ═══════════════════════════════════════════════════════ */

/* Layered sky — deep violet up top easing into a warm horizon haze */
.land-hero-sky {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 64% 44% at 50% 86%, rgba(245,158,11,.20), transparent 72%),
    radial-gradient(ellipse 120% 56% at 50% 100%, rgba(251,113,133,.24), transparent 74%),
    linear-gradient(180deg, #160B14 0%, #1B0C1B 46%, #29122A 76%, #3C1B30 100%);
}

/* The sun — a warm bloom resting on the horizon line */
.land-hero-sun {
  position: absolute; left: 50%; bottom: 31%;
  width: min(660px, 94vw); aspect-ratio: 1;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,224,158,.42) 0%,
    rgba(245,158,11,.28) 28%,
    rgba(251,113,133,.20) 52%,
    transparent 72%);
  filter: blur(16px);
  animation: land-sun-breathe 8s var(--ease-out) infinite;
}
@keyframes land-sun-breathe {
  0%, 100% { opacity: .8; transform: translate(-50%,50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%,50%) scale(1.045); }
}

/* The horizon — a bright filament where sky meets the grid */
.land-hero-horizon {
  position: absolute; left: 0; right: 0; bottom: 31%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, rgba(251,113,133,.42) 20%,
    rgba(255,234,196,.62) 50%, rgba(245,158,11,.42) 80%, transparent);
  box-shadow: 0 0 28px 6px rgba(245,158,11,.20);
}

/* Perspective grid floor below the horizon */
.land-hero-floor {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 31%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 34%, transparent 100%);
          mask-image: linear-gradient(to top, #000 34%, transparent 100%);
}
.land-hero-floor::before {
  content: '';
  position: absolute;
  left: -60%; right: -60%; bottom: 0;
  height: 320%;
  background-image:
    linear-gradient(90deg, rgba(124,58,237,.48) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(251,113,133,.55) 1px, transparent 1px);
  background-size: 66px 66px;
  transform: perspective(200px) rotateX(80deg);
  transform-origin: 50% 100%;
  animation: land-hero-grid 1.5s linear infinite;
}
@keyframes land-hero-grid {
  to { background-position: 0 66px, 0 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .land-hero-sun { animation: none; }
  .land-hero-floor::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   SHARED MOTION SYSTEM — Dashboards, Marketplace, Auth
   ═══════════════════════════════════════════════════════ */

/* ── Scroll reveals ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s var(--ease-out), transform 0.75s var(--ease-spring);
}
[data-reveal="left"]  { transform: translateX(-22px); }
[data-reveal="right"] { transform: translateX(22px); }
[data-reveal="scale"] { transform: scale(0.95); }
[data-reveal].in-view { opacity: 1 !important; transform: none !important; }

[data-stagger="1"] { transition-delay: 0ms !important; }
[data-stagger="2"] { transition-delay: 70ms !important; }
[data-stagger="3"] { transition-delay: 140ms !important; }
[data-stagger="4"] { transition-delay: 210ms !important; }
[data-stagger="5"] { transition-delay: 280ms !important; }
[data-stagger="6"] { transition-delay: 350ms !important; }

/* ── Staggered card mount animation (CSS-only, for dynamically loaded content) ── */
@keyframes card-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dash-animate > * {
  animation: card-in 0.55s var(--ease-out) both;
}
.dash-animate > *:nth-child(1)  { animation-delay: 0ms; }
.dash-animate > *:nth-child(2)  { animation-delay: 70ms; }
.dash-animate > *:nth-child(3)  { animation-delay: 140ms; }
.dash-animate > *:nth-child(4)  { animation-delay: 210ms; }
.dash-animate > *:nth-child(5)  { animation-delay: 280ms; }
.dash-animate > *:nth-child(6)  { animation-delay: 350ms; }
.dash-animate > *:nth-child(7)  { animation-delay: 420ms; }
.dash-animate > *:nth-child(8)  { animation-delay: 490ms; }
.dash-animate > *:nth-child(9)  { animation-delay: 560ms; }
.dash-animate > *:nth-child(10) { animation-delay: 630ms; }

/* ── Hover card lift + glow ── */
.dash-card {
  transition: transform 0.4s var(--ease-spring), box-shadow 0.35s ease, border-color 0.25s ease;
}
.dash-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(124,58,237,0.18);
  border-color: rgba(124,58,237,0.28) !important;
}

/* ── Action / quick-link card spring ── */
.dash-action {
  transition: transform 0.4s var(--ease-spring), box-shadow 0.3s ease, border-color 0.25s ease, background 0.2s ease;
}
.dash-action:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 12px 36px rgba(0,0,0,0.3), 0 0 0 1px rgba(124,58,237,0.22);
  border-color: rgba(124,58,237,0.3) !important;
  background: rgba(124,58,237,0.09) !important;
}
.dash-action-icon {
  transition: transform 0.4s var(--ease-spring), background 0.2s;
}
.dash-action:hover .dash-action-icon {
  transform: scale(1.18) rotate(-8deg);
  background: rgba(124,58,237,0.22) !important;
}

/* ── Booking / list row slide ── */
.dash-row {
  transition: transform 0.35s var(--ease-spring), border-color 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.dash-row:hover {
  transform: translateX(5px);
  border-color: rgba(124,58,237,0.22) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  background: rgba(124,58,237,0.04) !important;
}

/* ── Stat number glow pulse ── */
@keyframes dash-num-pulse {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 24px currentColor; }
}
.dash-stat-num { animation: dash-num-pulse 5s ease-in-out infinite; }

/* ── Sidebar nav active bar ── */
@keyframes dash-bar-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.dash-nav-item { position: relative; }
.dash-nav-item-active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--purple);
  border-radius: 0 3px 3px 0;
  transform-origin: center;
  animation: dash-bar-in 0.3s var(--ease-spring) forwards;
}

/* ── Sidebar mount animation ── */
@keyframes sidebar-item-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.dash-sidebar-item {
  animation: sidebar-item-in 0.45s var(--ease-out) both;
}
.dash-sidebar-item:nth-child(1) { animation-delay: 0ms; }
.dash-sidebar-item:nth-child(2) { animation-delay: 55ms; }
.dash-sidebar-item:nth-child(3) { animation-delay: 110ms; }
.dash-sidebar-item:nth-child(4) { animation-delay: 165ms; }

/* ── Toggle / pill button spring ── */
.dash-toggle {
  transition: transform 0.3s var(--ease-spring), box-shadow 0.2s;
}
.dash-toggle:hover:not(:disabled) { transform: scale(1.06); }
.dash-toggle:active:not(:disabled) { transform: scale(0.95); }

/* ── CTA button magnetic ── */
.dash-cta-btn {
  transition: transform 0.3s var(--ease-spring), box-shadow 0.25s ease, filter 0.2s;
}
.dash-cta-btn:hover:not(:disabled) {
  transform: scale(1.04) translateY(-1px);
  box-shadow: 0 8px 28px rgba(124,58,237,0.38);
  filter: brightness(1.1);
}
.dash-cta-btn:active:not(:disabled) { transform: scale(0.97); }

/* ── Package card highlighted glow ── */
.dash-pkg-highlight {
  box-shadow: 0 0 0 1px rgba(124,58,237,0.4), 0 8px 36px rgba(124,58,237,0.18);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.35s ease;
}
.dash-pkg-highlight:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(124,58,237,0.55), 0 16px 48px rgba(124,58,237,0.28);
}

/* ── Page header fade-up ── */
@keyframes page-header-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dash-header { animation: page-header-in 0.55s var(--ease-out) both; }
.dash-header-sub { animation: page-header-in 0.55s var(--ease-out) 80ms both; }

/* ═══════════════════════════════════════════════════════
   FIND PROVIDERS — Cinematic entrance animations
   ═══════════════════════════════════════════════════════ */

@keyframes fp-blur-in {
  from { opacity: 0; filter: blur(14px); transform: translateY(-12px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes fp-rise {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fp-rise-spring {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fp-slide-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fp-tab-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fp-card-pop {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes fp-orb-drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(40px, -30px) scale(1.08); }
}
@keyframes fp-orb-drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(-35px, 25px) scale(1.05); }
}
@keyframes fp-word-rev {
  from { transform: translateY(110%) rotate(4deg); opacity: 0; }
  to   { transform: translateY(0) rotate(0); opacity: 1; }
}
@keyframes fp-stat-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fp-shimmer {
  0%   { opacity: 1; }
  40%  { opacity: 0.35; }
  100% { opacity: 1; }
}
.fp-grid-shimmer { animation: fp-shimmer 0.35s var(--ease-out) both; }

/* ═══════════════════════════════════════════════════════
   FOUNDERS — card lift, avatar ring spin + halo
   ═══════════════════════════════════════════════════════ */

/* Card hover deliberately omits a `transform` so the entrance animation
   (`.land-rs.land-v` sets `transform: none !important`) isn't fought.
   Lift is faked with a heavier violet shadow + glow gradient instead. */
.land-fc {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 36px 28px;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 4px 24px rgba(255,255,255,.06);
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  position: relative; overflow: hidden;
  transition:
    box-shadow .4s ease,
    border-color .25s ease;
}
.land-fc::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(124,58,237,.1), transparent 65%);
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none;
}
.land-fc:hover {
  border-color: rgba(124,58,237,.28);
  box-shadow:
    0 22px 56px rgba(124,58,237,.22),
    0 4px 12px rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(124,58,237,.12);
}
.land-fc:hover::before { opacity: 1; }

/* Avatar — a photo behind a slowly-rotating violet/coral conic ring,
   floating gently on idle, blooming on hover. */
.land-fc-avatar-wrap {
  position: relative;
  width: 104px; height: 104px;
  display: grid; place-items: center;
  animation: land-fc-float 6s ease-in-out infinite;
}
.land-fc-avatar-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #7C3AED, #F59E0B, #C9B8FD, #FB7185, #7C3AED);
  animation: land-fc-spin 8s linear infinite;
  filter: blur(.5px);
  opacity: .9;
  transition: opacity .3s ease, filter .3s ease;
}
.land-fc-avatar-ring::after {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: var(--bg-card);
}
.land-fc-avatar-img {
  position: relative;
  width: 92px; height: 92px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 6px 20px rgba(124,58,237,.22);
  transition: transform .5s var(--ease-spring), box-shadow .3s ease;
  z-index: 1;
}
.land-fc:hover .land-fc-avatar-img {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(124,58,237,.4);
}
.land-fc:hover .land-fc-avatar-ring {
  opacity: 1;
  filter: blur(0);
}

@keyframes land-fc-spin { to { transform: rotate(360deg); } }
@keyframes land-fc-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* LinkedIn pill */
.land-fc-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600;
  color: var(--violet-lt); text-decoration: none;
  background: rgba(124,58,237,.08);
  padding: 8px 16px; border-radius: 100px;
  border: 1px solid rgba(124,58,237,.15);
  transition: background .2s ease, transform .25s var(--ease-spring), color .2s ease;
}
.land-fc-link:hover {
  background: linear-gradient(135deg, #7C3AED, #F59E0B);
  color: #fff;
  transform: translateY(-1px);
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .land-fc-avatar-wrap { animation: none; }
  .land-fc-avatar-ring { animation: none; }
  .land-fc:hover { transform: none; }
  .land-fc:hover .land-fc-avatar-img { transform: none; }
}

/* ═══════════════════════════════════════════════════════
   ONBOARDING — Aria, the Duolingo-style chat flow
   ═══════════════════════════════════════════════════════ */

body.ob-active { background: var(--surf); overflow: hidden; }

/*
 * NOTE on fonts: tailwind.config.ts maps `font-display` to var(--font-jakarta),
 * but layout.tsx only sets --font-manrope and --font-dm-sans. Reaching for the
 * `font-display` Tailwind class silently breaks. Until that config is fixed,
 * use .ob-display below (or var(--font-manrope) directly) in onboarding code.
 */
.ob-root { font-family: var(--font-dm-sans), 'Inter', sans-serif; }
.ob-display { font-family: var(--font-manrope), 'Manrope', sans-serif; }

/* Noise overlay */
.ob-noise {
  position: fixed; inset: 0; z-index: 1000;
  pointer-events: none; opacity: .015;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* BG gradient blob */
.ob-blob { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ob-blob::before {
  content: ''; position: absolute; top: -200px; right: -150px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.07), transparent 70%);
  filter: blur(60px);
}
.ob-blob::after {
  content: ''; position: absolute; bottom: -100px; left: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.07), transparent 70%);
  filter: blur(60px);
}

/* Step container */
.ob-step {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 20px 40px;
  opacity: 0; pointer-events: none;
  transform: translateX(60px);
  overflow-y: auto;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-spring);
}
.ob-step.is-active { opacity: 1; pointer-events: all; transform: translateX(0); }
.ob-step.is-exit { opacity: 0; transform: translateX(-60px); }

@media (max-width: 640px) {
  .ob-step { justify-content: flex-start; padding-top: 24px; padding-bottom: 24px; }
}

/* Aria bubble */
.ob-aria-av {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--layer), var(--purple));
  border: 3px solid #fff; box-shadow: 0 4px 20px rgba(124,58,237,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; position: relative; flex-shrink: 0;
}
.ob-aria-online {
  position: absolute; bottom: 1px; right: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--green); border: 2px solid #fff;
}
.ob-aria-bubble {
  background: #fff; border-radius: 20px 20px 20px 4px;
  padding: 18px 22px; max-width: 380px; position: relative;
  box-shadow: 0 4px 24px rgba(255,255,255,.08);
}
.ob-aria-bubble::after {
  content: 'Aria'; position: absolute; top: -20px; left: 0;
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(124,58,237,.5);
  font-family: var(--font-dm-sans), 'Inter', sans-serif;
}

/* Typing indicator */
.ob-typing { display: flex; align-items: center; gap: 5px; padding: 4px 0; }
.ob-typing-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(124,58,237,.35);
  animation: ob-td 1.2s ease-in-out infinite;
}
.ob-typing-dot:nth-child(2) { animation-delay: .2s; }
.ob-typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes ob-td {
  0%,100% { transform: translateY(0); opacity: .4; }
  50%      { transform: translateY(-5px); opacity: 1; }
}

/* Options */
.ob-opt {
  background: #fff; border: 2px solid rgba(255,255,255,.08);
  border-radius: 20px; padding: 22px 24px;
  cursor: pointer; display: flex; align-items: center; gap: 16px;
  transition: border-color .2s, background .2s,
              transform .25s var(--ease-spring), box-shadow .2s;
  position: relative; overflow: hidden;
  text-align: left; width: 100%;
}
.ob-opt::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(245,158,11,.04));
  opacity: 0; transition: opacity .2s;
}
.ob-opt:hover { border-color: rgba(124,58,237,.35); transform: translateY(-3px) scale(1.01); box-shadow: 0 8px 28px rgba(124,58,237,.12); }
.ob-opt:hover::before { opacity: 1; }
.ob-opt.is-selected { border-color: var(--purple); background: rgba(124,58,237,.06); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.ob-opt.is-selected::before { opacity: 1; }
.ob-opt-emo {
  font-size: 2rem; flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
  transition: transform .3s var(--ease-spring);
}
.ob-opt:hover .ob-opt-emo,
.ob-opt.is-selected .ob-opt-emo { transform: scale(1.15) rotate(-8deg); }
.ob-opt-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: transparent;
  transition: background .2s, border-color .2s, color .2s;
}
.ob-opt.is-selected .ob-opt-check { background: var(--purple); border-color: var(--purple); color: #fff; }

/* Destination grid */
.ob-dest {
  background: #fff; border: 2px solid rgba(255,255,255,.07);
  border-radius: 18px; padding: 18px 16px;
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 8px; text-align: center;
  transition: border-color .2s, transform .25s var(--ease-spring), box-shadow .2s, background .2s;
  width: 100%;
}
.ob-dest:hover { border-color: rgba(124,58,237,.3); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(124,58,237,.1); }
.ob-dest.is-selected { border-color: var(--purple); background: rgba(124,58,237,.05); box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
.ob-dest-flag { font-size: 2.2rem; line-height: 1; transition: transform .3s var(--ease-spring); }
.ob-dest:hover .ob-dest-flag,
.ob-dest.is-selected .ob-dest-flag { transform: scale(1.2) rotate(-6deg); }

/* Continue CTA */
.ob-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--purple), #F59E0B);
  color: #fff; font-weight: 700; font-size: .9375rem;
  padding: 14px 32px; border-radius: 100px; border: none;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(124,58,237,.35);
  transition: transform .3s var(--ease-spring), box-shadow .3s, opacity .3s;
}
.ob-cta:disabled, .ob-cta.is-disabled { opacity: .4; pointer-events: none; }
.ob-cta:not(:disabled):hover { transform: scale(1.04) translateY(-2px); box-shadow: 0 10px 36px rgba(124,58,237,.5); }

/* Back button */
.ob-back {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; cursor: pointer;
  font-weight: 600; font-size: .9rem;
  color: rgba(255,255,255,.62);
  padding: 12px 16px; border-radius: 100px;
  transition: color .2s, background .2s;
}
.ob-back:hover { color: var(--ink); background: rgba(255,255,255,.05); }

/* Mascot bounce */
@keyframes ob-bounce {
  from { transform: translateY(0) rotate(-5deg); }
  to   { transform: translateY(-16px) rotate(5deg); }
}
.ob-mascot { animation: ob-bounce 1.2s var(--ease-spring) infinite alternate; }

/* Slide-in */
@keyframes ob-slidein {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ob-slidein { animation: ob-slidein .4s var(--ease-out) both; }

/* Pop */
@keyframes ob-pop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.ob-pop { animation: ob-pop .35s var(--ease-spring) both; }

/* Form inputs */
.ob-inp {
  width: 100%; padding: 12px 14px;
  background: var(--surflow);
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-family: var(--font-dm-sans), 'Inter', sans-serif;
  font-size: .9375rem; color: var(--ink);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.ob-inp::-moz-placeholder { color: rgba(255,255,255,.3); }
.ob-inp::placeholder { color: rgba(255,255,255,.3); }
.ob-inp:focus { outline: none; border-color: var(--purple); background: #fff; box-shadow: 0 0 0 4px rgba(124,58,237,.08); }
.ob-inp.is-invalid { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.04); }
.ob-label {
  display: block; font-size: .8rem; font-weight: 600;
  color: rgba(255,255,255,.62); margin-bottom: 6px;
  letter-spacing: .01em;
}
.ob-err {
  font-size: .75rem; color: var(--coral);
  margin-top: 6px; font-weight: 500;
}

/* OTP boxes */
.ob-otp {
  width: 48px; height: 56px;
  text-align: center; font-size: 1.5rem; font-weight: 700;
  font-family: var(--font-manrope), 'Manrope', sans-serif;
  background: var(--surflow);
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  transition: border-color .2s, background .2s, transform .2s var(--ease-spring);
}
.ob-otp:focus { outline: none; border-color: var(--purple); background: #fff; transform: scale(1.05); }

/* Mascot pop in */
@keyframes ob-popin {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.ob-popin { animation: ob-popin .5s var(--ease-spring) both; }

/* Spinner */
@keyframes ob-spin { to { transform: rotate(360deg); } }
.ob-spin { animation: ob-spin .8s linear infinite; }

/* Confetti canvas */
.ob-confetti {
  position: fixed; inset: 0; z-index: 999;
  pointer-events: none; opacity: 0;
  transition: opacity .3s;
}
.ob-confetti.is-on { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   LOGIN AUTH — split-panel (dark brand + light form)
   ═══════════════════════════════════════════════════════ */

body.la-active { background: var(--surf); overflow: hidden; }

.la-root {
  position: fixed; inset: 0;
  display: flex;
  font-family: var(--font-dm-sans), 'Inter', sans-serif;
  background: var(--surf);
  color: var(--ink);
}

/* ── LEFT brand ───────────────────────────────────────── */
.la-left {
  width: 42%; min-width: 380px; max-width: 620px;
  position: relative; overflow: hidden;
  background: var(--deep);
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 40px 48px;
  flex-shrink: 0;
}
.la-orb {
  position: absolute; border-radius: 50%;
  filter: blur(70px); pointer-events: none;
}
.la-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(124,58,237,.24), transparent 70%);
  top: -150px; left: -100px;
  animation: la-orb-1 12s ease-in-out infinite alternate;
}
.la-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(245,158,11,.18), transparent 70%);
  bottom: -80px; right: -80px;
  animation: la-orb-2 10s ease-in-out infinite alternate;
}
@keyframes la-orb-1 { to { transform: translate(40px, 30px); } }
@keyframes la-orb-2 { to { transform: translate(-30px, -40px); } }

.la-grid {
  position: absolute; inset: 0; opacity: 0;
  background-image:
    linear-gradient(rgba(167,139,250,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,1) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
  animation: la-grid-in 1.4s var(--ease-out) 200ms forwards;
}
@keyframes la-grid-in { to { opacity: .045; } }

.la-left-top { position: relative; z-index: 1; }
.la-logo {
  font-family: var(--font-manrope), 'Manrope', sans-serif;
  font-weight: 900; font-size: 1.3rem;
  letter-spacing: -.03em; color: #A940FF;
  text-decoration: none;
  display: inline-block;
  transition: transform .3s var(--ease-spring);
}
.la-logo:hover { transform: scale(1.04); }
.la-logo em { color: var(--amber); font-style: normal; }

.la-left-mid {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 40px 0;
}

/* Headline with per-word slide-up reveal */
.la-headline {
  font-family: var(--font-manrope), 'Manrope', sans-serif;
  font-weight: 900; font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
  letter-spacing: -.045em; line-height: 1.05;
  color: #fff; margin-bottom: 18px;
}
.la-word { display: inline-block; overflow: hidden; padding: 0 2px; }
.la-word-in {
  display: inline-block;
  transform: translateY(115%) rotate(4deg);
  opacity: 0;
  animation: la-word-rev .85s var(--ease-spring) forwards;
}
@keyframes la-word-rev {
  to { transform: translateY(0) rotate(0); opacity: 1; }
}
.la-grad {
  background: linear-gradient(135deg, var(--purple-ltr), var(--azure));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.la-sub {
  font-size: .9375rem;
  color: rgba(255,255,255,.62);
  line-height: 1.72;
  margin-bottom: 36px;
  max-width: 440px;
}

.la-testi {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  padding: 22px 24px;
  backdrop-filter: blur(12px);
  max-width: 440px;
  transition: border-color .3s ease, background .3s ease;
}
.la-testi:hover {
  border-color: rgba(167,139,250,.22);
  background: rgba(255,255,255,.08);
}
.la-testi-quote {
  font-size: .9rem;
  color: rgba(255,255,255,.82);
  line-height: 1.65; margin-bottom: 14px;
  font-style: italic;
  quotes: '\201C' '\201D';
}
.la-testi-author { display: flex; align-items: center; gap: 12px; }
.la-testi-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), #F59E0B);
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 800; color: #fff;
  font-family: var(--font-manrope), 'Manrope', sans-serif;
  flex-shrink: 0;
}
.la-testi-name {
  display: block;
  font-size: .8125rem; font-weight: 600;
  color: rgba(255,255,255,.85);
}
.la-testi-uni {
  display: block;
  font-size: .75rem;
  color: rgba(255,255,255,.42);
  margin-top: 2px;
}

.la-trust {
  position: relative; z-index: 1;
  display: flex; gap: 32px;
}
.la-trust-item { line-height: 1.35; }
.la-trust-num {
  font-family: var(--font-manrope), 'Manrope', sans-serif;
  font-weight: 800; font-size: 1.15rem;
  color: var(--purple-ltr);
  margin-bottom: 2px;
}
.la-trust-lbl {
  font-size: .72rem;
  color: rgba(255,255,255,.42);
  white-space: pre-line;
  letter-spacing: .01em;
}

/* ── RIGHT form ────────────────────────────────────────── */
.la-right {
  flex: 1;
  overflow-y: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  background: var(--bg-card);
}
.la-card { width: 100%; max-width: 440px; }

.la-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 600;
  color: var(--t-ink2);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color .2s ease, transform .2s var(--ease-spring);
}
.la-back:hover { color: var(--purple); transform: translateX(-2px); }

.la-form-header { margin-bottom: 32px; }
.la-form-title {
  font-family: var(--font-manrope), 'Manrope', sans-serif;
  font-weight: 900; font-size: 1.75rem;
  letter-spacing: -.04em;
  color: var(--ink);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.la-form-sub {
  font-size: .9rem;
  color: var(--t-ink2);
}

.la-form {
  display: flex; flex-direction: column; gap: 18px;
}

.la-f-group { display: flex; flex-direction: column; gap: 7px; }
.la-f-label {
  font-size: .8125rem; font-weight: 600;
  color: var(--t-ink2);
  letter-spacing: .01em;
}
.la-f-input {
  width: 100%; padding: 13px 16px;
  background: var(--bg-el);
  border: 1.5px solid var(--bdr);
  border-radius: 12px;
  font-family: var(--font-dm-sans), 'Inter', sans-serif;
  font-size: .9375rem;
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.la-f-input::-moz-placeholder { color: rgba(255,255,255,.32); }
.la-f-input::placeholder { color: rgba(255,255,255,.32); }
.la-f-input:hover { border-color: rgba(124,58,237,.25); }
.la-f-input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(124,58,237,.1); }
.la-f-input.is-invalid {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(239,68,68,.1);
}
.la-f-err {
  font-size: .75rem;
  color: var(--coral);
  font-weight: 500;
  margin-top: 2px;
}

.la-pw-wrap { position: relative; }
.la-pw-wrap .la-f-input { padding-right: 48px; }
.la-pw-toggle {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: rgba(255,255,255,.42);
  transition: color .2s ease, background .2s ease;
}
.la-pw-toggle:hover { color: var(--purple); background: rgba(124,58,237,.06); }

.la-forgot {
  text-align: right; margin-top: -8px;
}
.la-forgot a,
.la-forgot button {
  font-size: .8125rem; font-weight: 600;
  font-family: inherit;
  color: var(--purple);
  text-decoration: none;
  background: none; border: none; padding: 0;
  cursor: pointer;
  transition: color .2s ease;
}
.la-forgot a:hover,
.la-forgot button:hover { color: #F59E0B; text-decoration: underline; }

.la-server-err {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.18);
  color: var(--coral);
  font-size: .825rem;
  font-weight: 500;
}

.la-submit {
  width: 100%;
  padding: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--grad-cta);
  color: #fff;
  font-family: var(--font-dm-sans), 'Inter', sans-serif;
  font-size: .9375rem; font-weight: 700;
  border: none; border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(124,58,237,.32);
  transition: transform .3s var(--ease-spring), box-shadow .3s ease, filter .2s ease, opacity .2s ease;
  margin-top: 4px;
}
.la-submit:hover:not(:disabled) {
  transform: scale(1.02) translateY(-1px);
  box-shadow: 0 10px 36px rgba(124,58,237,.46);
  filter: brightness(1.05);
}
.la-submit:active:not(:disabled) { transform: scale(.99); }
.la-submit:disabled { opacity: .7; cursor: not-allowed; }

.la-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--t-ink3);
  font-size: .8rem;
}
.la-divider span { white-space: nowrap; }
.la-divider::before,
.la-divider::after {
  content: '';
  flex: 1; height: 1px;
  background: var(--bdr);
}

.la-google {
  width: 100%; padding: 13px;
  background: var(--bg-c2);
  border: 1.5px solid var(--bdr);
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--font-dm-sans), 'Inter', sans-serif;
  font-size: .9rem; font-weight: 600;
  color: var(--ink);
  transition: background .2s ease, border-color .2s ease, transform .25s var(--ease-spring), box-shadow .25s ease;
}
.la-google:hover {
  background: var(--bg-el);
  border-color: rgba(124,58,237,.22);
  transform: scale(1.01);
  box-shadow: 0 6px 22px rgba(255,255,255,.06);
}
.la-google-ico { width: 18px; height: 18px; flex-shrink: 0; }

.la-footer {
  text-align: center;
  font-size: .8375rem;
  color: var(--t-ink2);
  margin-top: 6px;
}
.la-footer a {
  color: var(--purple);
  font-weight: 600;
  text-decoration: none;
  position: relative;
}
.la-footer a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, var(--purple), var(--azure));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease-spring);
}
.la-footer a:hover::after { transform: scaleX(1); }

/* Generic entrance fade */
.la-fade { opacity: 0; animation: la-fade-up .65s var(--ease-out) forwards; }
@keyframes la-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Spinner */
@keyframes la-spin { to { transform: rotate(360deg); } }
.la-spin { animation: la-spin .8s linear infinite; }

/* Stacked layout for narrow viewports — drop the brand panel. */
@media (max-width: 880px) {
  .la-left { display: none; }
  .la-right { padding: 32px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .la-orb-1, .la-orb-2 { animation: none; }
  .la-grid { animation: none; opacity: .045; }
  .la-word-in { animation: none; transform: none; opacity: 1; }
  .la-fade { animation: none; opacity: 1; transform: none; }
  .la-submit:hover:not(:disabled),
  .la-google:hover { transform: none; }
  .la-spin { animation: none; }
}

/* Respect users who opted out of motion. Disable all the springy/bouncy
   choreography but keep instant opacity changes so the flow stays usable. */
@media (prefers-reduced-motion: reduce) {
  .ob-step { transition: opacity .15s linear; transform: none !important; }
  .ob-step.is-exit { transform: none !important; }
  .ob-mascot { animation: none; }
  .ob-typing-dot { animation: none; opacity: 0.6; }
  .ob-slidein, .ob-pop, .ob-popin { animation: none !important; }
  .ob-opt, .ob-dest, .ob-cta { transition: border-color .15s, background .15s, box-shadow .15s; }
  .ob-opt:hover, .ob-dest:hover, .ob-cta:hover { transform: none !important; }
  .ob-opt-emo, .ob-dest-flag { transition: none !important; }
  .ob-opt:hover .ob-opt-emo, .ob-opt.is-selected .ob-opt-emo,
  .ob-dest:hover .ob-dest-flag, .ob-dest.is-selected .ob-dest-flag { transform: none !important; }
  .ob-confetti { display: none; }
  .ob-spin { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   HERO — "Find your [word]" rotating eyebrow spinner

   Vertical word ticker inside the hero badge. The .land-spin-track holds 7
   stacked words (6 unique + 1 duplicate of the first as a loop seam). The
   animation translates the track down through 7 positions; the seam word
   matches the first so the 100%→0% restart is visually invisible.

   6 words × 3s per word = 18s total cycle.
   Each word: ~14% of cycle held (≈2.5s) + ~2.67% transition (≈0.48s).
   ═══════════════════════════════════════════════════════ */

.land-spin-mask {
  display: inline-block;
  height: 1.25em;
  min-width: 2.8em;          /* fits widest word "university" more snugly */
  overflow: hidden;
  vertical-align: bottom;
  text-align: left;
}
.land-spin-track {
  display: flex;
  flex-direction: column;
  animation: land-spin-roll 18s cubic-bezier(0.7, 0, 0.3, 1) infinite;
  will-change: transform;
}
.land-spin-word {
  display: block;
  height: 1.25em;
  line-height: 1.25em;
  color: #4FA8FF;
  font-weight: 700;
  letter-spacing: -0.005em;
}
@keyframes land-spin-roll {
  0%,     14%   { transform: translateY(0); }
  16.66%, 30.66% { transform: translateY(-1.25em); }
  33.33%, 47.33% { transform: translateY(-2.5em); }
  50%,    64%   { transform: translateY(-3.75em); }
  66.66%, 80.66% { transform: translateY(-5em); }
  83.33%, 97.33% { transform: translateY(-6.25em); }
  100%          { transform: translateY(-7.5em); }
}
@media (prefers-reduced-motion: reduce) {
  .land-spin-track { animation: none; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════
   LANDING — Responsive overrides
   These were inline in LandingClient.tsx as a <style>{`...`}</style> block.
   React SSR HTML-encodes `>` to `&gt;` inside style text-children, which
   silently breaks every child-combinator selector (.foo > *). Living in a
   real .css file avoids the escaping bug.
   ═══════════════════════════════════════════════════════ */

/* Tablet / large phone: bento collapses to single column before the
   desktop 12-col grid (BC1 span 7 + BC2 span 5) runs out of room. */
@media (max-width: 880px) {
  .land-feat-sec { padding: 80px 24px !important; }
  .land-bento-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .land-bento-grid > * { grid-column: 1 / -1 !important; min-height: 260px !important; max-width: 100% !important; }
}

@media (max-width: 640px) {
  .land-hero-sec { padding: 110px 16px 72px !important; }
  .land-ctas { flex-direction: column !important; align-items: stretch !important; }
  .land-ctas > * { justify-content: center; text-align: center; }
  .land-punch-sec { padding: 56px 16px !important; }
  .land-punch-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .land-punch-grid > div:first-child { border-radius: 24px 24px 0 0 !important; }
  .land-punch-grid > div:last-child { border-radius: 0 0 24px 24px !important; }
  .land-feat-sec { padding: 64px 16px !important; }
  .land-bento-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .land-bento-grid > * { grid-column: 1 / -1 !important; min-height: 240px !important; max-width: 100% !important; }
  .land-stats-sec { padding: 64px 16px !important; }
  .land-stats-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .land-how-sec { padding: 64px 16px !important; }
  .land-how-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .land-cta-sec { padding: 80px 16px !important; }
  .land-cta-btns { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
  .land-cta-btns > * { width: 100%; justify-content: center !important; }
  .land-wl-form { flex-direction: column !important; border-radius: 16px !important; padding: 10px !important; gap: 8px !important; }
  .land-wl-btn { border-radius: 12px !important; width: 100% !important; text-align: center; }
  .land-bc { padding: 24px !important; }
  .land-founders-sec { padding: 64px 16px !important; }
  .land-founders-grid { grid-template-columns: 1fr !important; }
  .land-foot { padding: 32px 16px !important; }
  .land-foot-inner { flex-direction: column !important; gap: 20px !important; align-items: center !important; text-align: center; }
  .land-foot-links { flex-wrap: wrap !important; justify-content: center !important; gap: 14px !important; }
  .land-sproof { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
}

/* ═══════════════════════════════════════════════════════
   ARIA ONBOARDING (.ari-*)
   ═══════════════════════════════════════════════════════
   Duolingo-style chat flow with Aria. Scoped under .ari-root
   so the design's generic class names won't leak. Palette uses
   logo-aligned purple/azure; coral stays for errors only.
*/

body.ari-active { overflow: hidden; background: var(--surf); }

.ari-root { --ari-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ari-ease-out: cubic-bezier(0.16, 1, 0.3, 1); font-family: var(--font-dm-sans), 'Inter', sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }

.ari-root .ari-noise { position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0.015; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px; }

.ari-root .ari-blob { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ari-root .ari-blob::before { content: ''; position: absolute; top: -200px; right: -150px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 58, 237, 0.07), transparent 70%); filter: blur(60px); }
.ari-root .ari-blob::after { content: ''; position: absolute; bottom: -100px; left: -100px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 158, 11, 0.06), transparent 70%); filter: blur(60px); }

/* TOP BAR */
.ari-root .ari-top { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; background: rgba(22, 11, 20, 0.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(124, 58, 237, 0.08); }
.ari-root .ari-top-logo { font-family: var(--font-manrope), 'Manrope', sans-serif; font-weight: 900; font-size: 1.2rem; letter-spacing: -0.03em; color: var(--purple); text-decoration: none; }
.ari-root .ari-top-logo em { color: var(--azure); font-style: normal; }
.ari-root .ari-xp-wrap { flex: 1; max-width: 400px; margin: 0 60px; }
.ari-root .ari-xp-track { height: 8px; background: rgba(124, 58, 237, 0.12); border-radius: 100px; overflow: hidden; position: relative; }
.ari-root .ari-xp-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--purple), var(--azure)); transition: width 0.6s var(--ari-ease-out); width: 0%; }
.ari-root .ari-xp-label { font-size: 0.7rem; font-weight: 700; color: rgba(124, 58, 237, 0.6); margin-bottom: 5px; letter-spacing: 0.06em; text-transform: uppercase; }
.ari-root .ari-close { width: 34px; height: 34px; border-radius: 50%; background: rgba(124, 58, 237, 0.08); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: rgba(255, 255, 255, 0.45); transition: background 0.2s, transform 0.2s var(--ari-ease-spring); }
.ari-root .ari-close:hover { background: rgba(245, 158, 11, 0.14); color: var(--purple); transform: scale(1.1); }

/* STAGE + STEPS */
.ari-root .ari-stage { position: fixed; inset: 0; top: 72px; display: flex; align-items: center; justify-content: center; z-index: 10; padding: 20px; }
.ari-root .ari-step { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px 100px; opacity: 0; pointer-events: none; transform: translateX(60px); transition: opacity 0.5s var(--ari-ease-out), transform 0.5s var(--ari-ease-spring); }
.ari-root .ari-step[data-state='active'] { opacity: 1; pointer-events: all; transform: translateX(0); }
.ari-root .ari-step[data-state='exit'] { opacity: 0; transform: translateX(-60px); }
.ari-root .ari-step-inner { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; }

/* ARIA CHAT BUBBLE */
.ari-root .ari-aria { display: flex; align-items: flex-end; gap: 14px; align-self: flex-start; width: 100%; margin-bottom: 32px; }
.ari-root .ari-av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--ink), var(--purple)); border: 3px solid #fff; box-shadow: 0 4px 20px rgba(124, 58, 237, 0.25); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; position: relative; }
.ari-root .ari-online { position: absolute; bottom: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; background: #4ade80; border: 2px solid #fff; }
.ari-root .ari-bubble { background: #fff; border-radius: 20px 20px 20px 4px; padding: 18px 22px; box-shadow: 0 4px 24px rgba(255, 255, 255, 0.08); max-width: 380px; position: relative; }
.ari-root .ari-bubble::after { content: 'Aria'; position: absolute; top: -20px; left: 0; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(124, 58, 237, 0.55); }
.ari-root .ari-bubble-txt { font-size: 1rem; font-weight: 500; color: var(--ink); line-height: 1.6; }
.ari-root .ari-hi { font-size: 1.5rem; }
.ari-root .ari-react { font-size: 1.4rem; margin-bottom: 6px; display: block; animation: ari-pop 0.4s var(--ari-ease-spring); }

/* TYPING INDICATOR */
.ari-root .ari-typing { display: flex; align-items: center; gap: 5px; padding: 4px 0; }
.ari-root .ari-typing-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(124, 58, 237, 0.4); animation: ari-td 1.2s ease-in-out infinite; }
.ari-root .ari-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.ari-root .ari-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes ari-td { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-5px); opacity: 1; } }

/* QUESTION TITLE */
.ari-root .ari-q-title { font-family: var(--font-manrope), 'Manrope', sans-serif; font-weight: 900; font-size: 1.7rem; letter-spacing: -0.03em; color: var(--ink); text-align: center; margin-bottom: 8px; line-height: 1.2; }
.ari-root .ari-q-sub { font-size: 0.9rem; color: rgba(255, 255, 255, 0.45); text-align: center; margin-bottom: 32px; line-height: 1.6; }
.ari-root .ari-multi { font-size: 0.78rem; color: rgba(255, 255, 255, 0.35); text-align: center; margin-bottom: 16px; font-weight: 500; }

/* OPTION CARDS */
.ari-root .ari-opts { display: grid; gap: 12px; width: 100%; }
.ari-root .ari-opts.ari-g2 { grid-template-columns: 1fr 1fr; }
.ari-root .ari-opt { background: #fff; border: 2px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 22px 24px; cursor: pointer; display: flex; align-items: center; gap: 16px; transition: border-color 0.2s, background 0.2s, transform 0.25s var(--ari-ease-spring), box-shadow 0.2s; position: relative; overflow: hidden; text-align: left; font: inherit; color: inherit; }
.ari-root .ari-opt::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(245, 158, 11, 0.04)); opacity: 0; transition: opacity 0.2s; }
.ari-root .ari-opt:hover { border-color: rgba(124, 58, 237, 0.35); transform: translateY(-3px) scale(1.01); box-shadow: 0 8px 28px rgba(124, 58, 237, 0.14); }
.ari-root .ari-opt:hover::before { opacity: 1; }
.ari-root .ari-opt[data-selected='true'] { border-color: var(--purple); background: rgba(124, 58, 237, 0.06); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14); }
.ari-root .ari-opt[data-selected='true']::before { opacity: 1; }
.ari-root .ari-opt-emo { font-size: 2rem; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); transition: transform 0.3s var(--ari-ease-spring); }
.ari-root .ari-opt:hover .ari-opt-emo,
.ari-root .ari-opt[data-selected='true'] .ari-opt-emo { transform: scale(1.15) rotate(-8deg); }
.ari-root .ari-opt-body { flex: 1; }
.ari-root .ari-opt-label { font-family: var(--font-manrope), 'Manrope', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 3px; }
.ari-root .ari-opt-desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); line-height: 1.4; }
.ari-root .ari-opt-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.15); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; transition: background 0.2s, border-color 0.2s; color: #fff; }
.ari-root .ari-opt[data-selected='true'] .ari-opt-check { background: var(--purple); border-color: var(--purple); }
.ari-root .ari-opt-pop { animation: ari-pop 0.35s var(--ari-ease-spring); }

/* DESTINATION GRID */
.ari-root .ari-dests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.ari-root .ari-dest { background: #fff; border: 2px solid rgba(255, 255, 255, 0.07); border-radius: 18px; padding: 18px 16px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: border-color 0.2s, transform 0.25s var(--ari-ease-spring), box-shadow 0.2s; text-align: center; font: inherit; color: inherit; }
.ari-root .ari-dest:hover { border-color: rgba(124, 58, 237, 0.3); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(124, 58, 237, 0.1); }
.ari-root .ari-dest[data-selected='true'] { border-color: var(--purple); background: rgba(124, 58, 237, 0.05); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12); }
.ari-root .ari-dest-flag { font-size: 2.2rem; line-height: 1; transition: transform 0.3s var(--ari-ease-spring); }
.ari-root .ari-dest:hover .ari-dest-flag,
.ari-root .ari-dest[data-selected='true'] .ari-dest-flag { transform: scale(1.2) rotate(-6deg); }
.ari-root .ari-dest-name { font-family: var(--font-manrope), 'Manrope', sans-serif; font-weight: 700; font-size: 0.875rem; color: var(--ink); }

/* BOTTOM NAV */
.ari-root .ari-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 18px 40px 28px; background: rgba(22, 11, 20, 0.92); backdrop-filter: blur(16px); border-top: 1px solid rgba(124, 58, 237, 0.07); }
.ari-root .ari-nav[data-hidden='true'] { display: none; }
.ari-root .ari-back { display: flex; align-items: center; gap: 8px; background: transparent; border: none; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.4); padding: 12px 16px; border-radius: 100px; transition: color 0.2s, background 0.2s; }
.ari-root .ari-back:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.ari-root .ari-back[data-hidden='true'] { visibility: hidden; }
.ari-root .ari-continue { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--purple), var(--azure)); color: #fff; font-size: 0.9375rem; font-weight: 700; padding: 14px 32px; border-radius: 100px; border: none; cursor: pointer; transition: transform 0.3s var(--ari-ease-spring), box-shadow 0.3s, opacity 0.3s; box-shadow: 0 4px 24px rgba(124, 58, 237, 0.35); opacity: 0.4; pointer-events: none; }
.ari-root .ari-continue[data-ready='true'] { opacity: 1; pointer-events: all; }
.ari-root .ari-continue[data-ready='true']:hover { transform: scale(1.04) translateY(-2px); box-shadow: 0 10px 36px rgba(124, 58, 237, 0.5); }
.ari-root .ari-counter { font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.35); letter-spacing: 0.04em; }

/* CELEBRATION */
.ari-root .ari-cel { text-align: center; width: 100%; max-width: 540px; }
.ari-root .ari-mascot { font-size: 6rem; display: block; animation: ari-bounce 1.2s var(--ari-ease-spring) infinite alternate; margin-bottom: 24px; }
@keyframes ari-bounce { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-16px) rotate(5deg); } }
.ari-root .ari-cel-title { font-family: var(--font-manrope), 'Manrope', sans-serif; font-weight: 900; font-size: 2.4rem; letter-spacing: -0.04em; line-height: 1.1; color: var(--ink); margin-bottom: 14px; }
.ari-root .ari-cel-title .ari-violet { color: var(--purple); }
.ari-root .ari-cel-sub { font-size: 1.05rem; color: rgba(255, 255, 255, 0.5); line-height: 1.72; margin-bottom: 36px; }
.ari-root .ari-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; text-align: left; }
.ari-root .ari-sc { background: #fff; border-radius: 18px; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 4px 20px rgba(255, 255, 255, 0.06); }
.ari-root .ari-sc-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(124, 58, 237, 0.55); margin-bottom: 6px; }
.ari-root .ari-sc-val { font-family: var(--font-manrope), 'Manrope', sans-serif; font-weight: 800; font-size: 1rem; color: var(--ink); }
.ari-root .ari-cta { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--purple), var(--azure)); color: #fff; font-size: 1rem; font-weight: 700; padding: 16px 36px; border-radius: 100px; border: none; cursor: pointer; text-decoration: none; transition: transform 0.3s var(--ari-ease-spring), box-shadow 0.3s; box-shadow: 0 4px 32px rgba(124, 58, 237, 0.4); width: 100%; justify-content: center; }
.ari-root .ari-cta:hover { transform: scale(1.04) translateY(-2px); box-shadow: 0 12px 44px rgba(124, 58, 237, 0.55); }

/* CONFETTI */
.ari-root .ari-confetti { position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.ari-root .ari-confetti[data-show='true'] { opacity: 1; }

/* ACCOUNT FORM (step 6) */
.ari-root .ari-acct-card { background: #fff; border-radius: 24px; padding: 32px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px rgba(255, 255, 255, 0.07); width: 100%; }
.ari-root .ari-acct-title { font-family: var(--font-manrope), 'Manrope', sans-serif; font-weight: 900; font-size: 1.5rem; letter-spacing: -0.035em; color: var(--ink); margin-bottom: 6px; }
.ari-root .ari-acct-sub { font-size: 0.875rem; color: rgba(255, 255, 255, 0.45); margin-bottom: 24px; }
.ari-root .ari-acct-grid { display: flex; flex-direction: column; gap: 14px; }
.ari-root .ari-acct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ari-root .ari-label { display: block; font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); margin-bottom: 6px; letter-spacing: 0.01em; }
.ari-root .ari-input { width: 100%; padding: 12px 14px; background: var(--surf); border: 1.5px solid rgba(255, 255, 255, 0.08); border-radius: 12px; font-family: inherit; font-size: 0.9rem; color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s; }
.ari-root .ari-input::-moz-placeholder { color: rgba(255, 255, 255, 0.3); }
.ari-root .ari-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.ari-root .ari-input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); }
.ari-root .ari-input[aria-invalid='true'] { border-color: var(--coral); }
.ari-root .ari-err { display: block; margin-top: 6px; font-size: 0.75rem; color: var(--coral); font-weight: 500; min-height: 1em; }
.ari-root .ari-pw-wrap { position: relative; }
.ari-root .ari-pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 0.95rem; color: rgba(255, 255, 255, 0.35); }
.ari-root .ari-submit { width: 100%; margin-top: 20px; padding: 14px; background: linear-gradient(135deg, var(--purple), var(--azure)); color: #fff; font-size: 0.9375rem; font-weight: 700; border-radius: 100px; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3); transition: transform 0.3s var(--ari-ease-spring), opacity 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ari-root .ari-submit:hover:not(:disabled) { transform: scale(1.02) translateY(-1px); }
.ari-root .ari-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.ari-root .ari-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: rgba(255, 255, 255, 0.3); font-size: 0.8rem; }
.ari-root .ari-divider-line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08); }
.ari-root .ari-google { width: 100%; padding: 12px; background: #fff; border: 1.5px solid rgba(255, 255, 255, 0.1); border-radius: 100px; font-size: 0.875rem; font-weight: 600; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.2s; }
.ari-root .ari-google:hover { background: var(--surflow); }
.ari-root .ari-signin-link { text-align: center; font-size: 0.78rem; color: rgba(255, 255, 255, 0.45); margin-top: 14px; }
.ari-root .ari-signin-link a { color: var(--purple); font-weight: 600; text-decoration: none; }
.ari-root .ari-server-err { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); color: var(--coral); padding: 10px 14px; border-radius: 12px; font-size: 0.85rem; font-weight: 500; margin-bottom: 16px; }

/* OTP (step 7) */
.ari-root .ari-otp-icon { font-size: 3.5rem; display: block; margin-bottom: 20px; animation: ari-pop 0.5s var(--ari-ease-spring); }
.ari-root .ari-otp-title { font-family: var(--font-manrope), 'Manrope', sans-serif; font-weight: 900; font-size: 1.7rem; letter-spacing: -0.04em; color: var(--ink); margin-bottom: 10px; }
.ari-root .ari-otp-sub { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.48); line-height: 1.65; margin-bottom: 32px; }
.ari-root .ari-otp-sub strong { color: var(--purple); font-weight: 700; }
.ari-root .ari-otp-wrap { display: flex; gap: 10px; justify-content: center; margin-bottom: 24px; }
.ari-root .ari-otp-box { width: 50px; height: 60px; text-align: center; font-family: var(--font-manrope), 'Manrope', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--ink); background: var(--surf); border: 1.5px solid rgba(255, 255, 255, 0.08); border-radius: 14px; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.ari-root .ari-otp-box:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); transform: translateY(-2px); }
.ari-root .ari-otp-resend { background: none; border: none; cursor: pointer; color: var(--purple); font-weight: 600; font-size: 0.8rem; font-family: inherit; text-decoration: underline; }
.ari-root .ari-otp-resend:disabled { color: rgba(255, 255, 255, 0.3); cursor: not-allowed; text-decoration: none; }

/* ANIMATIONS */
@keyframes ari-pop { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes ari-slidein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.ari-root .ari-slide-in { animation: ari-slidein 0.4s var(--ari-ease-out) both; }

/* RESPONSIVE */
@media (max-width: 640px) {
  .ari-root .ari-opts.ari-g2 { grid-template-columns: 1fr; }
  .ari-root .ari-dests { grid-template-columns: repeat(2, 1fr); }
  .ari-root .ari-summary { grid-template-columns: 1fr; }
  .ari-root .ari-top { padding: 14px 20px; }
  .ari-root .ari-top-logo { font-size: 1rem; }
  .ari-root .ari-xp-wrap { margin: 0 20px; }
  .ari-root .ari-nav { padding: 14px 20px 24px; }
  .ari-root .ari-acct-row { grid-template-columns: 1fr; }
  .ari-root .ari-otp-box { width: 42px; height: 52px; font-size: 1.2rem; }
}

/* ═══════════════════════════════════════════════════════
   SIGN-UP — Step pill + password strength meter (.su-*)
   Adds on top of the .la-* split-panel auth layout.
   ═══════════════════════════════════════════════════════ */

.su-step-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.22);
  border-radius: 100px;
  padding: 5px 13px 5px 11px;
  margin-bottom: 22px;
  width: -moz-fit-content;
  width: fit-content;
  animation: la-fade-up .55s var(--ease-out) both;
}
.su-step-num {
  font-size: .64rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--amber);
}
.su-step-sep { color: rgba(245,158,11,.4); font-weight: 700; }
.su-step-lbl {
  font-size: .73rem; font-weight: 600;
  color: var(--t-ink2);
}

/* Password strength meter — sunset gradient fills as rules pass */
.su-meter {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.su-meter-track {
  height: 4px;
  border-radius: 100px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  position: relative;
}
.su-meter-fill {
  height: 100%; width: 0%;
  border-radius: inherit;
  background: var(--grad-sunset);
  transition: width .4s var(--ease-spring);
  box-shadow: 0 0 14px rgba(245,158,11,.22);
}
.su-meter-fill[data-score="1"] { width: 33%; }
.su-meter-fill[data-score="2"] { width: 66%; }
.su-meter-fill[data-score="3"] { width: 100%; }

.su-meter-rules {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: .72rem; font-weight: 500;
  color: var(--t-ink3);
}
.su-meter-rules li {
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .25s ease;
}
.su-meter-rules li::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .5;
  transition: background .25s, opacity .25s, box-shadow .3s, transform .35s var(--ease-spring);
}
.su-meter-rules li[data-ok="true"] {
  color: var(--amber-lt);
}
.su-meter-rules li[data-ok="true"]::before {
  background: var(--amber);
  opacity: 1;
  box-shadow: 0 0 8px var(--am-glow);
  transform: scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
  .su-step-pill { animation: none; }
  .su-meter-fill { transition: none; }
  .su-meter-rules li::before { transition: none; }
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.focus\:border-purple:focus {
  --tw-border-opacity: 1;
  border-color: rgb(124 58 237 / var(--tw-border-opacity, 1));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-purple:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(124 58 237 / var(--tw-ring-opacity, 1));
}

@media (min-width: 640px) {

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }
}