/* Look 6 "mix" (light blend of 2 Soft glow + 3 Floating pills). CSS only, DOM untouched.
   Design read: Indian job seekers + employers; friendly-confident, playful but premium; token source Stripe-style light
   (single violet-indigo family) + pill grammar from look 3. Theme: light. Dials VARIANCE 4 / MOTION 3 / DENSITY 4.
   Radius system: interactive = pill (999px; textarea 24px), cards 22px, panels/modals 24px, icon discs round.
   Accent: one violet-indigo family (#8A2BE2 -> #4F46E5). Functional extra: #25D366 on WhatsApp buttons only.
   Motion budget per view: 1 ambient loop (hero pills drift, 16-20s, <=10px, <=5deg), no entrances, no pulsing buttons. */
html.look-mix {
  --scheme: light; --hsl-bg: 240 20% 98%; --hsl-fg: 250 20% 9%; --hsl-line: 250 25% 91%; --hsl-ring: 262 70% 45%;
  --g-border: linear-gradient(135deg, #D7C8FF 0%, #BCD0FF 60%, #E2D8FF 100%);
  --bg: #FAFAFC;
  --surface: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--g-border) border-box; --surface-2: #F4F2FC;
  --line: #E7E4F3; --line-hover: #B7A6F2;
  --ink: #15131E; --ink-2: #464456; --ink-3: #5D5B6D;
  --acc: #6D28D9; --acc-2: #6D28D9; --acc-head: #7B22D4; --err: #B42318;
  --grad-text: linear-gradient(90deg, #8A2BE2 0%, #4F46E5 100%);
  --font-head: 'Unbounded', system-ui, sans-serif; --font-body: 'Geist', system-ui, sans-serif; --font-label: 'Geist', system-ui, sans-serif;
  --head-track: -0.035em; --h1-weight: 800; --h2-weight: 800; --h3-weight: 600; --h3-track: -0.015em; --stat-weight: 700;
  --h1-size: clamp(2rem, 5.8vw, 4.4rem); --h1-lh: 1.06; --home-h1: clamp(1.85rem, 5.2vw, 4rem); --h2-size: clamp(1.6rem, 3.4vw, 2.6rem);
  --radius-card: 22px; --radius-card-lg: 24px; --radius-btn: 999px; --radius-panel: 24px; --radius-input: 999px;
  --card-border: 1px solid transparent;
  --card-shadow: 0 0 0 1px rgba(76,52,170,.03), 0 1px 2px -1px rgba(76,52,170,.08), 0 12px 32px -20px rgba(76,52,170,.28);
  --card-shadow-hover: 0 0 0 1px rgba(76,52,170,.05), 0 2px 4px -1px rgba(76,52,170,.08), 0 20px 44px -22px rgba(76,52,170,.40);
  --nav-bg: rgba(250,250,252,.82); --nav-line: #ECEAF5; --navpill-bg: #FFFFFF; --navpill-line: #E9E6F5; --navhover-bg: #F1EDFF; --navhover-ink: #15131E; --menu-bg: #FFFFFF;
  --chip-bg: #F4F0FF; --chip-line: #DCD2FF; --chip-ink: #4C1D95;
  --disc-bg: linear-gradient(135deg, #F3EEFF, #EDF2FF); --disc-line: #DDD4FF; --disc-ink: #5B21B6;
  --frame-bg: var(--g-border); --frame-inner: #FFFFFF; --frame-shadow: 0 18px 50px -28px rgba(91,70,229,.45);
  --panel-bg: radial-gradient(ellipse 60% 90% at 50% 0%, rgba(167,139,250,.14), transparent 70%) padding-box, linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--g-border) border-box;
  --btn-bg: linear-gradient(120deg, #8A2BE2 0%, #5B45E6 100%); --btn-bg-hover: linear-gradient(120deg, #7A1FD0 0%, #4C38D8 100%);
  --btn-ink: #FFFFFF; --btn-border: 0;
  --btn-shadow: 0 1px 2px rgba(76,29,149,.18), 0 10px 24px -12px rgba(110,50,220,.65);
  --btn-shadow-hover: 0 1px 2px rgba(76,29,149,.2), 0 16px 30px -14px rgba(110,50,220,.75);
  --btn2-bg: #FFFFFF; --btn2-ink: #2E1065; --btn2-border: 1.5px solid #CDBEFB; --btn2-bg-hover: #F4F0FF;
  --input-bg: #FFFFFF; --input-line: #DCD8EA; --placeholder: #66647A; --focus: #6D28D9; --focus-ring: rgba(109,40,217,.18);
  --dot: #DCD8EA; --dot-on: #8A2BE2; --modal-bg: #FFFFFF; --scrim: rgba(21,19,30,.4); --sel-bg: #DDD6FE; --sel-ink: #15131E;
  --wa-shadow: 0 8px 22px -12px rgba(22,140,70,.55);
  /* hero decor */
  --hero-glow: radial-gradient(ellipse 52% 46% at 50% 0%, rgba(167,139,250,.30), rgba(147,180,253,.16) 55%, transparent 80%);
  --pill-a: rgba(138,43,226,.55); --pill-b: rgba(79,70,229,.45); --pill-fill: rgba(237,231,255,.7);
  --solid-nav: #FAFAFC;
}

/* ---- shared mix rules (generated for each mix look; "M " = html.look-<name>) ---- */
html.look-mix {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 100ms; --dur-hover: 160ms; --dur-ui: 220ms; --dur-menu: 260ms;
  scroll-padding-top: 88px;
}
/* type */
html.look-mix #root h1, html.look-mix #root h2, html.look-mix #root h3 { text-wrap: balance; }
html.look-mix #root h1 { line-height: var(--h1-lh, 1.06) !important; }
html.look-mix #root p { text-wrap: pretty; }
html.look-mix #root h3, html.look-mix #root h4 { font-weight: var(--h3-weight) !important; letter-spacing: var(--h3-track) !important; }
html.look-mix #root nav .ml-10.flex > button { font-weight: 500 !important; }
html.look-mix #root .text-2xl.font-bold, html.look-mix #root .text-3xl.font-bold, html.look-mix #root .text-4xl.font-bold { font-variant-numeric: tabular-nums; }
html.look-mix #root section:first-of-type .inline-flex.rounded-full { font-weight: 600; letter-spacing: .01em; }
/* gradient text: one short phrase only (home title); inner hero phrases use the solid accent */
html.look-mix #root .bg-clip-text.text-transparent { background-image: none !important; color: var(--acc-head) !important; }
html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4 h1 .bg-clip-text.text-transparent { background-image: var(--grad-text) !important; color: transparent !important; }
/* fields: interactive = pill, textarea 24px */
html.look-mix #root textarea { border-radius: 24px !important; }
/* static soft glow, confined to the top of each hero (no animation) */
html.look-mix #root section:first-of-type { position: relative; isolation: isolate; background-image: var(--hero-glow) !important; background-repeat: no-repeat !important; background-size: 100% min(680px, 100%) !important; }
html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4 { background-image: var(--hero-glow) !important; background-repeat: no-repeat !important; background-size: 100% 760px !important; }
html.look-mix #root section:first-of-type h1, html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4 h1 { isolation: isolate; }
/* hero copy always paints above the decorative pills */
html.look-mix #root section:first-of-type p, html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4 p { position: relative; z-index: 1; }
/* drifting empty outline pills: hero only, 4 max, one shared ambient loop */
html.look-mix #root section:first-of-type h1::before, html.look-mix #root section:first-of-type h1::after,
html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4 h1::before, html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4 h1::after,
html.look-mix #root section:first-of-type::before, html.look-mix #root section:first-of-type::after,
html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4::before, html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 999px; border: 1.5px solid var(--pill-a);
  width: 104px; height: 36px; transform: rotate(var(--r0, 0deg));
  animation: mix-drift var(--dur, 18s) var(--ease-inout) var(--delay, 0s) infinite alternate;
}
html.look-mix #root section:first-of-type h1::before, html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4 h1::before { left: 3%; top: -34px; --r0: -6deg; --r1: -2deg; --dx: 10px; --dy: -6px; --dur: 17s; }
html.look-mix #root section:first-of-type h1::after, html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4 h1::after { right: 3%; bottom: -46px; width: 88px; height: 32px; border-color: var(--pill-b); background: var(--pill-fill); --r0: 5deg; --r1: 1deg; --dx: -10px; --dy: -6px; --dur: 19s; --delay: -6s; }
html.look-mix #root section:first-of-type::before { left: 7%; bottom: 18%; width: 132px; height: 40px; border-color: var(--pill-b); --r0: 3deg; --r1: -3deg; --dx: 8px; --dy: -8px; --dur: 21s; --delay: -11s; }
html.look-mix #root section:first-of-type::after { right: 8%; top: 24%; width: 72px; height: 28px; --r0: -4deg; --r1: 2deg; --dx: -6px; --dy: 8px; --dur: 16s; --delay: -3s; }
html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4::before { left: 3%; top: 250px; width: 132px; height: 40px; border-color: var(--pill-b); --r0: 3deg; --r1: -3deg; --dx: 8px; --dy: -8px; --dur: 21s; --delay: -11s; }
html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4::after { right: 6%; top: 84px; width: 72px; height: 28px; --r0: -4deg; --r1: 2deg; --dx: -6px; --dy: 8px; --dur: 16s; --delay: -3s; }
@keyframes mix-drift { from { transform: translate(0, 0) rotate(var(--r0, 0deg)); } to { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r1, 0deg)); } }
@media (max-width: 1279px) { html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4::before { display: none; } }
@media (min-width: 768px) and (max-width: 1279px) {
  html.look-mix #root section:first-of-type::after, html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4::after { display: none; }
  html.look-mix #root section:first-of-type h1::after, html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4 h1::after { bottom: auto; top: -30px; right: 4%; }
}
@media (max-width: 767px) {
  html.look-mix #root section:first-of-type::before, html.look-mix #root section:first-of-type::after,
  html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4::before, html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4::after { display: none; }
  html.look-mix #root section:first-of-type h1::before, html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4 h1::before { width: 72px; height: 26px; top: -24px; left: 2%; }
  html.look-mix #root section:first-of-type h1::after, html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4 h1::after { width: 60px; height: 24px; bottom: -26px; right: 2%; }
  html.look-mix #root .min-h-screen.flex.items-center.justify-center.p-4 { background-size: 100% 520px !important; }
}
/* states: custom easing, colour-first hovers, lift only on primary CTAs + the home path cards, press, disabled */
html.look-mix #root button, html.look-mix #root a[class*="px-"][class*="py-"][class*="rounded"], html.look-mix #root input, html.look-mix #root select, html.look-mix #root textarea {
  transition: background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out) !important;
}
html.look-mix #root .group.relative.bg-white.bg-opacity-10, html.look-mix #root [class*="hover:shadow"], html.look-mix #root [class*="hover:-translate"] {
  transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out) !important;
}
html.look-mix #root .hover\:scale-105:hover, html.look-mix #root .hover\:-translate-y-1:hover { transform: none !important; }
@media (hover: hover) {
  html.look-mix #root .group.relative.bg-white.bg-opacity-10:hover { transform: translateY(-2px) !important; }
  html.look-mix #root .group.relative button:hover, html.look-mix #root section:first-of-type button:hover, html.look-mix #root button.hover\:scale-105:hover { transform: translateY(-1px) !important; }
}
html.look-mix #root button:active, html.look-mix #root a[class*="px-"][class*="py-"][class*="rounded"]:active { transform: translateY(1px) scale(.98) !important; transition-duration: var(--dur-press) !important; }
html.look-mix #root button:disabled, html.look-mix #root button[aria-disabled="true"] { opacity: .5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }
@media (min-width: 1024px) {
  html.look-mix #root nav button, html.look-mix #root section:first-of-type button, html.look-mix #root .group.relative button, html.look-mix #root section:last-of-type button { white-space: nowrap; }
}
/* mobile menu opens like a sheet from the top */
html.look-mix #root nav .md\:hidden > div { transform-origin: top; animation: mix-menu-in var(--dur-menu) var(--ease-sheet) both; }
@keyframes mix-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
/* reduced transparency: solid surfaces */
@media (prefers-reduced-transparency: reduce) {
  html.look-mix #root *, html.look-mix #root nav.fixed { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html.look-mix #root nav.fixed { background: var(--solid-nav) !important; }
}
/* 44px tap targets on touch layouts (visual size unchanged where possible) */
@media (max-width: 767px) {
  html.look-mix #root nav button.text-2xl, html.look-mix #root nav button.text-gray-700 { padding: 10px !important; margin: -10px !important; min-width: 44px; min-height: 44px; }
  html.look-mix #root footer ul.space-y-2 > li + li, html.look-mix #root footer ul.space-y-3 > li + li { margin-top: 0 !important; }
  html.look-mix #root footer a { display: inline-block; padding-block: 12px; }
  html.look-mix #root button.font-medium.flex.items-center.gap-2:not([class*="px-"]), html.look-mix #root button.text-blue-600.font-medium:not([class*="px-"]) { padding-block: 10px !important; margin-block: -10px !important; min-height: 44px; }
  html.look-mix #root section a.underline { display: inline-block; padding-block: 12px; margin-block: -12px; }
  html.look-mix #root button.w-4.h-4 { box-sizing: content-box !important; padding: 14px !important; background-clip: content-box !important; }
}