/* Local Inter fonts */
/* Existing site base CSS */

    /* Content showcase: four clear categories with visual samples */
    .content-showcase {
      border-top: 1px solid rgba(255,255,255,.10);
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(8,7,16,.56));
      padding: 64px 0 70px;
      overflow: hidden;
    }
    .showcase-heading { text-align: center; margin: 0 auto 34px; max-width: 760px; padding: 0 18px; }
    .showcase-kicker { color: #e62e7a; font-size: 11px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
    .showcase-title { margin: 10px 0 0; color: #fff; font-size: clamp(30px, 4vw, 52px); line-height: 1.04; font-weight: 900; letter-spacing: -.035em; }
    .showcase-copy { margin: 13px auto 0; max-width: 620px; color: #a9a8b6; font-size: 14px; line-height: 1.7; }
    .showcase-grid { width: min(1240px, calc(100% - 32px)); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .showcase-card { position: relative; padding: 14px; border-radius: 24px; border: 1px solid rgba(255,255,255,.11); background: linear-gradient(155deg, rgba(22,20,38,.90), rgba(10,9,22,.78)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 45px rgba(0,0,0,.20); transition: transform .25s ease, border-color .25s ease; }
    .showcase-card:hover { transform: translateY(-4px); border-color: rgba(230,46,122,.42); }
    .showcase-label { display:flex; align-items:center; justify-content:space-between; padding: 3px 2px 13px; }
    .showcase-label h3 { margin:0; color:#fff; font-size:14px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
    .showcase-label span { color:#e62e7a; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
    .sample-frame { position:relative; min-height:190px; overflow:hidden; border-radius:17px; border:1px solid rgba(255,255,255,.10); background:#090812; }
    .sample-caption { margin:12px 3px 2px; color:#aaa9b7; font-size:11px; line-height:1.55; }
    .sample-frame.has-real-media { min-height:190px; background:#090812; }
    .sample-frame.has-real-media img { width:100%; height:100%; min-height:190px; display:block; object-fit:cover; object-position:center; }


    .video-sample { background: radial-gradient(circle at 72% 22%, rgba(230,46,122,.34), transparent 34%), linear-gradient(145deg,#24122a,#0a1524 58%,#171021); }
    .video-sample:before { content:""; position:absolute; inset:18px; border-radius:13px; background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.10); }
    .video-play { position:absolute; inset:0; margin:auto; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:18px; background:linear-gradient(135deg,#e62e7a,#7c3aed); box-shadow:0 0 35px rgba(230,46,122,.40); }
    .video-play:after { content:""; margin-left:4px; border-left:15px solid white; border-top:9px solid transparent; border-bottom:9px solid transparent; }
    .video-progress { position:absolute; left:32px; right:32px; bottom:30px; height:4px; border-radius:999px; background:rgba(255,255,255,.17); }
    .video-progress:after { content:""; display:block; width:58%; height:100%; border-radius:inherit; background:#e62e7a; }

    .image-sample { padding:10px; display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:1fr 1fr; gap:8px; background:#0b0915; }
    .image-tile { border-radius:11px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.10); }
    .image-tile:first-child { grid-row:1 / span 2; background:linear-gradient(160deg,#df2b78,#6d2fd5 50%,#181426); }
    .image-tile:nth-child(2) { background:linear-gradient(135deg,#22485c,#53a7a0); }
    .image-tile:nth-child(3) { background:linear-gradient(135deg,#d76b2b,#f2c35c 55%,#7d2f63); }
    .image-tile:after { content:""; position:absolute; inset:18% 16%; border-radius:50%; background:rgba(255,255,255,.20); filter:blur(12px); }

    .website-sample { padding:13px; background:linear-gradient(145deg,#121122,#080711); }
    .browser-shell { height:100%; border-radius:11px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#0c0b17; }
    .browser-top { height:25px; display:flex; align-items:center; gap:5px; padding:0 9px; background:#1b192b; border-bottom:1px solid rgba(255,255,255,.08); }
    .browser-top i { width:6px; height:6px; border-radius:50%; background:#e62e7a; box-shadow:10px 0 0 #7c3aed,20px 0 0 #8a8998; }
    .website-hero-mini { height:75px; margin:10px; border-radius:9px; background:linear-gradient(120deg,rgba(230,46,122,.38),rgba(124,58,237,.32)),linear-gradient(135deg,#24132c,#101628); display:flex; align-items:center; padding:12px; }
    .website-lines { width:56%; }
    .website-lines b,.website-lines span { display:block; border-radius:999px; background:rgba(255,255,255,.90); }
    .website-lines b { width:88%; height:7px; margin-bottom:7px; }
    .website-lines span { width:64%; height:4px; opacity:.42; }
    .website-blocks { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:0 10px 10px; }
    .website-blocks i { height:43px; border-radius:7px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); }

    .social-sample { display:grid; place-items:center; background:radial-gradient(circle at 50% 10%,rgba(124,58,237,.26),transparent 42%),#090812; }
    .social-post { width:72%; height:86%; border-radius:15px; border:1px solid rgba(255,255,255,.12); background:#151322; padding:10px; box-shadow:0 14px 34px rgba(0,0,0,.32); }
    .social-head { display:flex; align-items:center; gap:7px; height:20px; }
    .social-avatar { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#e62e7a,#7c3aed); }
    .social-name { width:45%; height:5px; border-radius:999px; background:rgba(255,255,255,.75); }
    .social-media { margin-top:8px; height:88px; border-radius:10px; background:linear-gradient(145deg,#f12d7c,#792ee0 52%,#25245a); position:relative; overflow:hidden; }
    .social-media:after { content:"HOUSTON"; position:absolute; inset:0; display:grid; place-items:center; font-size:16px; font-weight:900; letter-spacing:.12em; color:white; }
    .social-actions { display:flex; gap:7px; margin-top:9px; }
    .social-actions i { width:16px; height:16px; border-radius:5px; border:1px solid rgba(255,255,255,.18); }
    .social-text { margin-top:8px; height:4px; width:82%; border-radius:999px; background:rgba(255,255,255,.20); box-shadow:0 8px 0 rgba(255,255,255,.11); }

    @media (max-width: 980px) { .showcase-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (max-width: 560px) {
      .content-showcase { padding:48px 0 54px; }
      .showcase-grid { grid-template-columns:1fr; width:min(100% - 24px, 460px); }
      .sample-frame { min-height:210px; }
      .showcase-copy { font-size:13px; }
    }

  

    /* Final responsive/performance safeguards */
    main > section:not(:first-of-type),
    footer {
      content-visibility: auto;
      contain-intrinsic-size: 1px 900px;
    }

    .hero-stage-grid { align-items: center; }

    @media (max-width: 1280px) {
      .hero-stage-grid {
        grid-template-columns: 1fr !important;
      }
      .hero-side-column {
        display: none !important;
      }
      .hero-phone-wrap {
        max-width: 320px !important;
      }
      .hero-stage {
        max-width: 760px !important;
      }
    }

    @media (max-width: 1023px) {
      .hero-grid {
        padding-top: 104px !important;
      }
      .hero-copy {
        text-align: center !important;
      }
      .hero-copy > div:first-child,
      .hero-copy > div:nth-of-type(2),
      .hero-mini {
        margin-left: auto !important;
        margin-right: auto !important;
      }
      .hero-copy > div:nth-of-type(2) button,
      .hero-copy > div:nth-of-type(2) a {
        width: 100%;
      }
      .hero-mini {
        grid-template-columns: 1fr !important;
        max-width: 460px !important;
      }
      .hero-stage {
        width: 100% !important;
        padding: 12px !important;
      }
      .glass-stage > div {
        grid-template-columns: minmax(0,1fr) !important;
      }
      .glass-stage .phone-shell {
        max-width: 340px;
        margin-inline: auto;
      }
    }

    @media (max-width: 640px) {
      .hero-grid {
        padding-top: 96px !important;
        padding-bottom: 44px !important;
      }
      .hero-copy h1 {
        font-size: clamp(2rem, 11vw, 3rem) !important;
      }
      .hero-copy > div:nth-of-type(2) button,
      .hero-copy > div:nth-of-type(2) a {
        min-height: 50px;
      }
      .glass-stage {
        padding: 10px !important;
        border-radius: 28px !important;
      }
      .glass-stage .phone-shell {
        max-width: 280px;
      }
      .glass-stage .phone-shell > div:last-child {
        height: min(500px, 66vh) !important;
        min-height: 420px;
      }
      .showcase-grid {
        grid-template-columns: 1fr !important;
      }
      .showcase-card {
        max-width: 100%;
      }
    }

  

/* Static Tailwind build */
/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: Inter,sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-cyan-200: oklch(91.7% 0.08 205.041);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-purple-300: oklch(82.7% 0.119 306.383);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-brandDark: #080710;
    --color-brandCard: #11111e;
    --color-brandPink: #e62e7a;
    --color-brandPinkHover: #ff3c8c;
    --color-brandPurple: #7c3aed;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }
}
.pointer-events-none {
  pointer-events: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: calc(var(--spacing) * 0);
}
.inset-x-0 {
  inset-inline: calc(var(--spacing) * 0);
}
.top-0 {
  top: calc(var(--spacing) * 0);
}
.top-1\/2 {
  top: calc(1/2 * 100%);
}
.top-2 {
  top: calc(var(--spacing) * 2);
}
.top-10 {
  top: calc(var(--spacing) * 10);
}
.top-\[8\%\] {
  top: 8%;
}
.top-\[15\%\] {
  top: 15%;
}
.top-\[30px\] {
  top: 30px;
}
.top-\[35\%\] {
  top: 35%;
}
.top-\[45\%\] {
  top: 45%;
}
.-right-1 {
  right: calc(var(--spacing) * -1);
}
.right-3 {
  right: calc(var(--spacing) * 3);
}
.right-4 {
  right: calc(var(--spacing) * 4);
}
.right-\[5\%\] {
  right: 5%;
}
.right-\[10\%\] {
  right: 10%;
}
.right-\[14\%\] {
  right: 14%;
}
.right-\[22\%\] {
  right: 22%;
}
.-bottom-1 {
  bottom: calc(var(--spacing) * -1);
}
.bottom-0 {
  bottom: calc(var(--spacing) * 0);
}
.bottom-3 {
  bottom: calc(var(--spacing) * 3);
}
.bottom-\[10\%\] {
  bottom: 10%;
}
.bottom-\[18\%\] {
  bottom: 18%;
}
.left-1\/2 {
  left: calc(1/2 * 100%);
}
.left-3 {
  left: calc(var(--spacing) * 3);
}
.left-4 {
  left: calc(var(--spacing) * 4);
}
.left-\[10\%\] {
  left: 10%;
}
.left-\[20\%\] {
  left: 20%;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-50 {
  z-index: 50;
}
.z-\[70\] {
  z-index: 70;
}
.mx-auto {
  margin-inline: auto;
}
.mt-1 {
  margin-top: calc(var(--spacing) * 1);
}
.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}
.mt-3 {
  margin-top: calc(var(--spacing) * 3);
}
.mt-4 {
  margin-top: calc(var(--spacing) * 4);
}
.mt-5 {
  margin-top: calc(var(--spacing) * 5);
}
.mt-6 {
  margin-top: calc(var(--spacing) * 6);
}
.mt-7 {
  margin-top: calc(var(--spacing) * 7);
}
.mt-8 {
  margin-top: calc(var(--spacing) * 8);
}
.mt-10 {
  margin-top: calc(var(--spacing) * 10);
}
.mt-14 {
  margin-top: calc(var(--spacing) * 14);
}
.mr-1 {
  margin-right: calc(var(--spacing) * 1);
}
.mr-2 {
  margin-right: calc(var(--spacing) * 2);
}
.mb-3 {
  margin-bottom: calc(var(--spacing) * 3);
}
.mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}
.ml-0\.5 {
  margin-left: calc(var(--spacing) * 0.5);
}
.ml-2 {
  margin-left: calc(var(--spacing) * 2);
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline-flex {
  display: inline-flex;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.h-1\.5 {
  height: calc(var(--spacing) * 1.5);
}
.h-2\.5 {
  height: calc(var(--spacing) * 2.5);
}
.h-4 {
  height: calc(var(--spacing) * 4);
}
.h-6 {
  height: calc(var(--spacing) * 6);
}
.h-7 {
  height: calc(var(--spacing) * 7);
}
.h-8 {
  height: calc(var(--spacing) * 8);
}
.h-9 {
  height: calc(var(--spacing) * 9);
}
.h-10 {
  height: calc(var(--spacing) * 10);
}
.h-11 {
  height: calc(var(--spacing) * 11);
}
.h-12 {
  height: calc(var(--spacing) * 12);
}
.h-14 {
  height: calc(var(--spacing) * 14);
}
.h-20 {
  height: calc(var(--spacing) * 20);
}
.h-36 {
  height: calc(var(--spacing) * 36);
}
.h-72 {
  height: calc(var(--spacing) * 72);
}
.h-\[42\%\] {
  height: 42%;
}
.h-\[62\%\] {
  height: 62%;
}
.h-\[70\%\] {
  height: 70%;
}
.h-\[78\%\] {
  height: 78%;
}
.h-\[94\%\] {
  height: 94%;
}
.h-\[320px\] {
  height: 320px;
}
.h-\[360px\] {
  height: 360px;
}
.h-\[450px\] {
  height: 450px;
}
.h-\[500px\] {
  height: 500px;
}
.h-\[600px\] {
  height: 600px;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-\[92vh\] {
  max-height: 92vh;
}
.min-h-\[390px\] {
  min-height: 390px;
}
.w-1\.5 {
  width: calc(var(--spacing) * 1.5);
}
.w-2\.5 {
  width: calc(var(--spacing) * 2.5);
}
.w-4 {
  width: calc(var(--spacing) * 4);
}
.w-7 {
  width: calc(var(--spacing) * 7);
}
.w-8 {
  width: calc(var(--spacing) * 8);
}
.w-9 {
  width: calc(var(--spacing) * 9);
}
.w-10 {
  width: calc(var(--spacing) * 10);
}
.w-11 {
  width: calc(var(--spacing) * 11);
}
.w-12 {
  width: calc(var(--spacing) * 12);
}
.w-14 {
  width: calc(var(--spacing) * 14);
}
.w-28 {
  width: calc(var(--spacing) * 28);
}
.w-72 {
  width: calc(var(--spacing) * 72);
}
.w-\[320px\] {
  width: 320px;
}
.w-\[360px\] {
  width: 360px;
}
.w-\[450px\] {
  width: 450px;
}
.w-\[500px\] {
  width: 500px;
}
.w-\[600px\] {
  width: 600px;
}
.w-full {
  width: 100%;
}
.max-w-2xl {
  max-width: var(--container-2xl);
}
.max-w-3xl {
  max-width: var(--container-3xl);
}
.max-w-4xl {
  max-width: var(--container-4xl);
}
.max-w-5xl {
  max-width: var(--container-5xl);
}
.max-w-7xl {
  max-width: var(--container-7xl);
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[260px\] {
  max-width: 260px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[580px\] {
  max-width: 580px;
}
.max-w-md {
  max-width: var(--container-md);
}
.max-w-xl {
  max-width: var(--container-xl);
}
.min-w-0 {
  min-width: calc(var(--spacing) * 0);
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.animate-ping {
  animation: var(--animate-ping);
}
.cursor-pointer {
  cursor: pointer;
}
.resize-none {
  resize: none;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-start {
  align-items: flex-start;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.gap-1 {
  gap: calc(var(--spacing) * 1);
}
.gap-2 {
  gap: calc(var(--spacing) * 2);
}
.gap-2\.5 {
  gap: calc(var(--spacing) * 2.5);
}
.gap-3 {
  gap: calc(var(--spacing) * 3);
}
.gap-4 {
  gap: calc(var(--spacing) * 4);
}
.gap-5 {
  gap: calc(var(--spacing) * 5);
}
.gap-6 {
  gap: calc(var(--spacing) * 6);
}
.gap-7 {
  gap: calc(var(--spacing) * 7);
}
.gap-8 {
  gap: calc(var(--spacing) * 8);
}
.gap-10 {
  gap: calc(var(--spacing) * 10);
}
.space-y-2 {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.space-y-4 {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.scroll-smooth {
  scroll-behavior: smooth;
}
.rounded-2xl {
  border-radius: var(--radius-2xl);
}
.rounded-3xl {
  border-radius: var(--radius-3xl);
}
.rounded-\[24px\] {
  border-radius: 24px;
}
.rounded-\[32px\] {
  border-radius: 32px;
}
.rounded-\[34px\] {
  border-radius: 34px;
}
.rounded-\[38px\] {
  border-radius: 38px;
}
.rounded-\[42px\] {
  border-radius: 42px;
}
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-xl {
  border-radius: var(--radius-xl);
}
.rounded-b-2xl {
  border-bottom-right-radius: var(--radius-2xl);
  border-bottom-left-radius: var(--radius-2xl);
}
.rounded-b-\[18px\] {
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-\[7px\] {
  border-style: var(--tw-border-style);
  border-width: 7px;
}
.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}
.border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.border-\[\#34344d\] {
  border-color: #34344d;
}
.border-\[\#303047\] {
  border-color: #303047;
}
.border-brandDark {
  border-color: var(--color-brandDark);
}
.border-brandPink {
  border-color: var(--color-brandPink);
}
.border-brandPink\/20 {
  border-color: color-mix(in srgb, #e62e7a 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-brandPink) 20%, transparent);
  }
}
.border-brandPink\/25 {
  border-color: color-mix(in srgb, #e62e7a 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-brandPink) 25%, transparent);
  }
}
.border-brandPink\/30 {
  border-color: color-mix(in srgb, #e62e7a 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-brandPink) 30%, transparent);
  }
}
.border-purple-400\/25 {
  border-color: color-mix(in srgb, oklch(71.4% 0.203 305.504) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-purple-400) 25%, transparent);
  }
}
.border-white\/5 {
  border-color: color-mix(in srgb, #fff 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
  }
}
.border-white\/10 {
  border-color: color-mix(in srgb, #fff 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
  }
}
.border-white\/15 {
  border-color: color-mix(in srgb, #fff 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
  }
}
.border-white\/20 {
  border-color: color-mix(in srgb, #fff 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
  }
}
.bg-\[\#0a0913\]\/40 {
  background-color: color-mix(in oklab, #0a0913 40%, transparent);
}
.bg-\[\#0a0913\]\/60 {
  background-color: color-mix(in oklab, #0a0913 60%, transparent);
}
.bg-\[\#0b0a15\]\/90 {
  background-color: color-mix(in oklab, #0b0a15 90%, transparent);
}
.bg-\[\#1a1a2e\] {
  background-color: #1a1a2e;
}
.bg-\[\#1b1a2c\] {
  background-color: #1b1a2c;
}
.bg-\[\#090a14\] {
  background-color: #090a14;
}
.bg-\[\#04040a\] {
  background-color: #04040a;
}
.bg-\[\#07060f\] {
  background-color: #07060f;
}
.bg-\[\#090812\]\/55 {
  background-color: color-mix(in oklab, #090812 55%, transparent);
}
.bg-\[\#090813\]\/80 {
  background-color: color-mix(in oklab, #090813 80%, transparent);
}
.bg-\[\#303047\] {
  background-color: #303047;
}
.bg-black {
  background-color: var(--color-black);
}
.bg-black\/40 {
  background-color: color-mix(in srgb, #000 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
  }
}
.bg-black\/70 {
  background-color: color-mix(in srgb, #000 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
  }
}
.bg-black\/85 {
  background-color: color-mix(in srgb, #000 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 85%, transparent);
  }
}
.bg-brandCard {
  background-color: var(--color-brandCard);
}
.bg-brandCard\/50 {
  background-color: color-mix(in srgb, #11111e 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-brandCard) 50%, transparent);
  }
}
.bg-brandCard\/60 {
  background-color: color-mix(in srgb, #11111e 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-brandCard) 60%, transparent);
  }
}
.bg-brandCard\/75 {
  background-color: color-mix(in srgb, #11111e 75%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-brandCard) 75%, transparent);
  }
}
.bg-brandCard\/80 {
  background-color: color-mix(in srgb, #11111e 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-brandCard) 80%, transparent);
  }
}
.bg-brandDark {
  background-color: var(--color-brandDark);
}
.bg-brandDark\/80 {
  background-color: color-mix(in srgb, #080710 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-brandDark) 80%, transparent);
  }
}
.bg-brandDark\/95 {
  background-color: color-mix(in srgb, #080710 95%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-brandDark) 95%, transparent);
  }
}
.bg-brandPink {
  background-color: var(--color-brandPink);
}
.bg-brandPink\/5 {
  background-color: color-mix(in srgb, #e62e7a 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-brandPink) 5%, transparent);
  }
}
.bg-brandPink\/10 {
  background-color: color-mix(in srgb, #e62e7a 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-brandPink) 10%, transparent);
  }
}
.bg-brandPink\/15 {
  background-color: color-mix(in srgb, #e62e7a 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-brandPink) 15%, transparent);
  }
}
.bg-emerald-500\/10 {
  background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
  }
}
.bg-emerald-500\/15 {
  background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent);
  }
}
.bg-purple-500\/10 {
  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
  }
}
.bg-purple-500\/15 {
  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-purple-500) 15%, transparent);
  }
}
.bg-white {
  background-color: var(--color-white);
}
.bg-white\/5 {
  background-color: color-mix(in srgb, #fff 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
  }
}
.bg-white\/\[0\.03\] {
  background-color: color-mix(in srgb, #fff 3%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
  }
}
.bg-gradient-to-b {
  --tw-gradient-position: to bottom in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  --tw-gradient-position: to bottom right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  --tw-gradient-position: to top in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-black\/85 {
  --tw-gradient-from: color-mix(in srgb, #000 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-from: color-mix(in oklab, var(--color-black) 85%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-brandPink {
  --tw-gradient-from: var(--color-brandPink);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-brandPink\/10 {
  --tw-gradient-from: color-mix(in srgb, #e62e7a 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-from: color-mix(in oklab, var(--color-brandPink) 10%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-brandPink\/35 {
  --tw-gradient-from: color-mix(in srgb, #e62e7a 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-from: color-mix(in oklab, var(--color-brandPink) 35%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-brandPurple\/35 {
  --tw-gradient-from: color-mix(in srgb, #7c3aed 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-from: color-mix(in oklab, var(--color-brandPurple) 35%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-sky-300 {
  --tw-gradient-from: var(--color-sky-300);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-transparent {
  --tw-gradient-from: transparent;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.via-brandPink\/35 {
  --tw-gradient-via: color-mix(in srgb, #e62e7a 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-via: color-mix(in oklab, var(--color-brandPink) 35%, transparent);
  }
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-cyan-200 {
  --tw-gradient-via: var(--color-cyan-200);
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}
.to-brandCard\/80 {
  --tw-gradient-to: color-mix(in srgb, #11111e 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-to: color-mix(in oklab, var(--color-brandCard) 80%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-brandPurple {
  --tw-gradient-to: var(--color-brandPurple);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-slate-200\/90 {
  --tw-gradient-to: color-mix(in srgb, oklch(92.9% 0.013 255.508) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-to: color-mix(in oklab, var(--color-slate-200) 90%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-slate-300\/80 {
  --tw-gradient-to: color-mix(in srgb, oklch(86.9% 0.022 252.894) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-to: color-mix(in oklab, var(--color-slate-300) 80%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-slate-400\/70 {
  --tw-gradient-to: color-mix(in srgb, oklch(70.4% 0.04 256.788) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-to: color-mix(in oklab, var(--color-slate-400) 70%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-transparent {
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-yellow-200 {
  --tw-gradient-to: var(--color-yellow-200);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.bg-clip-text {
  background-clip: text;
}
.object-cover {
  object-fit: cover;
}
.p-2 {
  padding: calc(var(--spacing) * 2);
}
.p-2\.5 {
  padding: calc(var(--spacing) * 2.5);
}
.p-4 {
  padding: calc(var(--spacing) * 4);
}
.p-5 {
  padding: calc(var(--spacing) * 5);
}
.p-6 {
  padding: calc(var(--spacing) * 6);
}
.px-2 {
  padding-inline: calc(var(--spacing) * 2);
}
.px-3 {
  padding-inline: calc(var(--spacing) * 3);
}
.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
.px-5 {
  padding-inline: calc(var(--spacing) * 5);
}
.px-6 {
  padding-inline: calc(var(--spacing) * 6);
}
.px-7 {
  padding-inline: calc(var(--spacing) * 7);
}
.py-0\.5 {
  padding-block: calc(var(--spacing) * 0.5);
}
.py-1 {
  padding-block: calc(var(--spacing) * 1);
}
.py-2 {
  padding-block: calc(var(--spacing) * 2);
}
.py-2\.5 {
  padding-block: calc(var(--spacing) * 2.5);
}
.py-3 {
  padding-block: calc(var(--spacing) * 3);
}
.py-3\.5 {
  padding-block: calc(var(--spacing) * 3.5);
}
.py-4 {
  padding-block: calc(var(--spacing) * 4);
}
.py-12 {
  padding-block: calc(var(--spacing) * 12);
}
.py-14 {
  padding-block: calc(var(--spacing) * 14);
}
.py-16 {
  padding-block: calc(var(--spacing) * 16);
}
.py-20 {
  padding-block: calc(var(--spacing) * 20);
}
.pt-3 {
  padding-top: calc(var(--spacing) * 3);
}
.pt-4 {
  padding-top: calc(var(--spacing) * 4);
}
.pt-6 {
  padding-top: calc(var(--spacing) * 6);
}
.pt-10 {
  padding-top: calc(var(--spacing) * 10);
}
.pt-14 {
  padding-top: calc(var(--spacing) * 14);
}
.pt-28 {
  padding-top: calc(var(--spacing) * 28);
}
.pb-2 {
  padding-bottom: calc(var(--spacing) * 2);
}
.pb-5 {
  padding-bottom: calc(var(--spacing) * 5);
}
.pb-14 {
  padding-bottom: calc(var(--spacing) * 14);
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[2\.15rem\] {
  font-size: 2.15rem;
}
.text-\[7px\] {
  font-size: 7px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.leading-\[0\.96\] {
  --tw-leading: 0.96;
  line-height: 0.96;
}
.leading-\[1\.08\] {
  --tw-leading: 1.08;
  line-height: 1.08;
}
.leading-\[1\.45\] {
  --tw-leading: 1.45;
  line-height: 1.45;
}
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.leading-relaxed {
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}
.leading-tight {
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
}
.font-black {
  --tw-font-weight: var(--font-weight-black);
  font-weight: var(--font-weight-black);
}
.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.font-extrabold {
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
}
.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.tracking-\[0\.2em\] {
  --tw-tracking: 0.2em;
  letter-spacing: 0.2em;
}
.tracking-\[0\.16em\] {
  --tw-tracking: 0.16em;
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  --tw-tracking: 0.18em;
  letter-spacing: 0.18em;
}
.tracking-\[0\.25em\] {
  --tw-tracking: 0.25em;
  letter-spacing: 0.25em;
}
.tracking-\[0\.28em\] {
  --tw-tracking: 0.28em;
  letter-spacing: 0.28em;
}
.tracking-tight {
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
}
.tracking-wide {
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
}
.tracking-wider {
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
}
.text-brandDark {
  color: var(--color-brandDark);
}
.text-brandPink {
  color: var(--color-brandPink);
}
.text-emerald-300 {
  color: var(--color-emerald-300);
}
.text-emerald-400 {
  color: var(--color-emerald-400);
}
.text-gray-300 {
  color: var(--color-gray-300);
}
.text-gray-400 {
  color: var(--color-gray-400);
}
.text-gray-500 {
  color: var(--color-gray-500);
}
.text-purple-300 {
  color: var(--color-purple-300);
}
.text-purple-400 {
  color: var(--color-purple-400);
}
.text-transparent {
  color: transparent;
}
.text-white {
  color: var(--color-white);
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_30px_80px_rgba\(0\,0\,0\,\.5\)\] {
  --tw-shadow: 0 30px 80px var(--tw-shadow-color, rgba(0,0,0,.5));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-neon {
  --tw-shadow: 0 0 28px var(--tw-shadow-color, rgba(230,46,122,.28));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.blur-\[90px\] {
  --tw-blur: blur(90px);
  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,);
}
.blur-\[100px\] {
  --tw-blur: blur(100px);
  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,);
}
.blur-\[110px\] {
  --tw-blur: blur(110px);
  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,);
}
.blur-\[120px\] {
  --tw-blur: blur(120px);
  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,);
}
.blur-\[130px\] {
  --tw-blur: blur(130px);
  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-\[0_2px_6px_rgba\(0\,0\,0\,0\.6\)\] {
  --tw-drop-shadow-size: drop-shadow(0 2px 6px var(--tw-drop-shadow-color, rgba(0,0,0,0.6)));
  --tw-drop-shadow: var(--tw-drop-shadow-size);
  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-\[0_4px_14px_rgba\(0\,0\,0\,0\.55\)\] {
  --tw-drop-shadow-size: drop-shadow(0 4px 14px var(--tw-drop-shadow-color, rgba(0,0,0,0.55)));
  --tw-drop-shadow: var(--tw-drop-shadow-size);
  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,);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(var(--blur-md));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}
.\[-webkit-text-stroke\:1px_white\] {
  -webkit-text-stroke: 1px white;
}
.group-open\:rotate-45 {
  &:is(:where(.group):is([open], :popover-open, :open) *) {
    rotate: 45deg;
  }
}
.hover\:-translate-y-0\.5 {
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: calc(var(--spacing) * -0.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
}
.hover\:-translate-y-1 {
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
}
.hover\:scale-102 {
  &:hover {
    @media (hover: hover) {
      --tw-scale-x: 102%;
      --tw-scale-y: 102%;
      --tw-scale-z: 102%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
}
.hover\:scale-103 {
  &:hover {
    @media (hover: hover) {
      --tw-scale-x: 103%;
      --tw-scale-y: 103%;
      --tw-scale-z: 103%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
}
.hover\:scale-105 {
  &:hover {
    @media (hover: hover) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
}
.hover\:border-brandPink {
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-brandPink);
    }
  }
}
.hover\:border-brandPink\/30 {
  &:hover {
    @media (hover: hover) {
      border-color: color-mix(in srgb, #e62e7a 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-brandPink) 30%, transparent);
      }
    }
  }
}
.hover\:border-brandPink\/35 {
  &:hover {
    @media (hover: hover) {
      border-color: color-mix(in srgb, #e62e7a 35%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-brandPink) 35%, transparent);
      }
    }
  }
}
.hover\:border-brandPink\/40 {
  &:hover {
    @media (hover: hover) {
      border-color: color-mix(in srgb, #e62e7a 40%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-brandPink) 40%, transparent);
      }
    }
  }
}
.hover\:border-brandPink\/45 {
  &:hover {
    @media (hover: hover) {
      border-color: color-mix(in srgb, #e62e7a 45%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-brandPink) 45%, transparent);
      }
    }
  }
}
.hover\:bg-brandPink\/10 {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in srgb, #e62e7a 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-brandPink) 10%, transparent);
      }
    }
  }
}
.hover\:bg-brandPink\/15 {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in srgb, #e62e7a 15%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-brandPink) 15%, transparent);
      }
    }
  }
}
.hover\:bg-brandPinkHover {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-brandPinkHover);
    }
  }
}
.hover\:text-white {
  &:hover {
    @media (hover: hover) {
      color: var(--color-white);
    }
  }
}
.hover\:opacity-90 {
  &:hover {
    @media (hover: hover) {
      opacity: 90%;
    }
  }
}
.hover\:shadow-strong {
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 0 44px var(--tw-shadow-color, rgba(230,46,122,.42));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
}
.focus\:border-brandPink {
  &:focus {
    border-color: var(--color-brandPink);
  }
}
.focus\:ring-2 {
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}
.focus\:ring-brandPink {
  &:focus {
    --tw-ring-color: var(--color-brandPink);
  }
}
.focus\:ring-offset-2 {
  &:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
}
.focus\:ring-offset-\[\#04040a\] {
  &:focus {
    --tw-ring-offset-color: #04040a;
  }
}
.focus\:ring-offset-brandDark {
  &:focus {
    --tw-ring-offset-color: var(--color-brandDark);
  }
}
.focus\:outline-none {
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
}
.sm\:col-span-2 {
  @media (width >= 40rem) {
    grid-column: span 2 / span 2;
  }
}
.sm\:block {
  @media (width >= 40rem) {
    display: block;
  }
}
.sm\:h-\[470px\] {
  @media (width >= 40rem) {
    height: 470px;
  }
}
.sm\:max-w-\[300px\] {
  @media (width >= 40rem) {
    max-width: 300px;
  }
}
.sm\:grid-cols-2 {
  @media (width >= 40rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sm\:grid-cols-3 {
  @media (width >= 40rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.sm\:grid-cols-4 {
  @media (width >= 40rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.sm\:flex-row {
  @media (width >= 40rem) {
    flex-direction: row;
  }
}
.sm\:items-center {
  @media (width >= 40rem) {
    align-items: center;
  }
}
.sm\:justify-between {
  @media (width >= 40rem) {
    justify-content: space-between;
  }
}
.sm\:gap-4 {
  @media (width >= 40rem) {
    gap: calc(var(--spacing) * 4);
  }
}
.sm\:p-6 {
  @media (width >= 40rem) {
    padding: calc(var(--spacing) * 6);
  }
}
.sm\:p-8 {
  @media (width >= 40rem) {
    padding: calc(var(--spacing) * 8);
  }
}
.sm\:px-5 {
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing) * 5);
  }
}
.sm\:px-6 {
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing) * 6);
  }
}
.sm\:pt-12 {
  @media (width >= 40rem) {
    padding-top: calc(var(--spacing) * 12);
  }
}
.sm\:pt-32 {
  @media (width >= 40rem) {
    padding-top: calc(var(--spacing) * 32);
  }
}
.sm\:text-4xl {
  @media (width >= 40rem) {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}
.sm\:text-5xl {
  @media (width >= 40rem) {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
}
.sm\:text-base {
  @media (width >= 40rem) {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
}
.sm\:text-lg {
  @media (width >= 40rem) {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
}
.sm\:text-sm {
  @media (width >= 40rem) {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
}
.sm\:text-\[2\.55rem\] {
  @media (width >= 40rem) {
    font-size: 2.55rem;
  }
}
.sm\:text-\[7px\] {
  @media (width >= 40rem) {
    font-size: 7px;
  }
}
.sm\:text-\[9px\] {
  @media (width >= 40rem) {
    font-size: 9px;
  }
}
.md\:col-span-3 {
  @media (width >= 48rem) {
    grid-column: span 3 / span 3;
  }
}
.md\:col-span-6 {
  @media (width >= 48rem) {
    grid-column: span 6 / span 6;
  }
}
.md\:grid {
  @media (width >= 48rem) {
    display: grid;
  }
}
.md\:grid-cols-12 {
  @media (width >= 48rem) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
.md\:grid-cols-\[1fr_minmax\(210px\,280px\)_1fr\] {
  @media (width >= 48rem) {
    grid-template-columns: 1fr minmax(210px,280px) 1fr;
  }
}
.lg\:col-span-1 {
  @media (width >= 64rem) {
    grid-column: span 1 / span 1;
  }
}
.lg\:col-span-6 {
  @media (width >= 64rem) {
    grid-column: span 6 / span 6;
  }
}
.lg\:col-start-1 {
  @media (width >= 64rem) {
    grid-column-start: 1;
  }
}
.lg\:col-start-2 {
  @media (width >= 64rem) {
    grid-column-start: 2;
  }
}
.lg\:col-start-3 {
  @media (width >= 64rem) {
    grid-column-start: 3;
  }
}
.lg\:row-span-2 {
  @media (width >= 64rem) {
    grid-row: span 2 / span 2;
  }
}
.lg\:row-start-1 {
  @media (width >= 64rem) {
    grid-row-start: 1;
  }
}
.lg\:row-start-2 {
  @media (width >= 64rem) {
    grid-row-start: 2;
  }
}
.lg\:block {
  @media (width >= 64rem) {
    display: block;
  }
}
.lg\:flex {
  @media (width >= 64rem) {
    display: flex;
  }
}
.lg\:hidden {
  @media (width >= 64rem) {
    display: none;
  }
}
.lg\:max-w-\[270px\] {
  @media (width >= 64rem) {
    max-width: 270px;
  }
}
.lg\:grid-cols-3 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.lg\:grid-cols-5 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.lg\:grid-cols-12 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
.lg\:grid-cols-\[\.9fr_1\.1fr\] {
  @media (width >= 64rem) {
    grid-template-columns: .9fr 1.1fr;
  }
}
.lg\:grid-cols-\[1\.05fr_\.95fr\] {
  @media (width >= 64rem) {
    grid-template-columns: 1.05fr .95fr;
  }
}
.lg\:grid-cols-\[1fr_280px_1fr\] {
  @media (width >= 64rem) {
    grid-template-columns: 1fr 280px 1fr;
  }
}
.lg\:grid-rows-2 {
  @media (width >= 64rem) {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
}
.lg\:p-10 {
  @media (width >= 64rem) {
    padding: calc(var(--spacing) * 10);
  }
}
.lg\:px-8 {
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing) * 8);
  }
}
.lg\:pt-32 {
  @media (width >= 64rem) {
    padding-top: calc(var(--spacing) * 32);
  }
}
.lg\:pb-20 {
  @media (width >= 64rem) {
    padding-bottom: calc(var(--spacing) * 20);
  }
}
.lg\:text-\[58px\] {
  @media (width >= 64rem) {
    font-size: 58px;
  }
}
.xl\:col-span-5 {
  @media (width >= 80rem) {
    grid-column: span 5 / span 5;
  }
}
.xl\:col-span-7 {
  @media (width >= 80rem) {
    grid-column: span 7 / span 7;
  }
}
.xl\:text-\[64px\] {
  @media (width >= 80rem) {
    font-size: 64px;
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}


/* Minimal local icon font */
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:swap;src:url("../assets/fonts/fa-subset-small.woff2?v=20260729iphone1") format("woff2")}
.fa-solid,.fas{font-family:"Font Awesome 6 Free";font-weight:900;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}
.fa-solid:before,.fas:before{content:var(--fa)}
.fa-arrow-pointer{--fa:"\f245"}
.fa-arrow-right{--fa:"\f061"}
.fa-arrow-trend-up{--fa:"\e098"}
.fa-bag-shopping{--fa:"\f290"}
.fa-bars{--fa:"\f0c9"}
.fa-bezier-curve{--fa:"\f55b"}
.fa-bolt{--fa:"\f0e7"}
.fa-building{--fa:"\f1ad"}
.fa-bullseye{--fa:"\f140"}
.fa-calendar-check{--fa:"\f274"}
.fa-camera{--fa:"\f030"}
.fa-campground{--fa:"\f6bb"}
.fa-chart-line{--fa:"\f201"}
.fa-circle-play{--fa:"\f144"}
.fa-clapperboard{--fa:"\e131"}
.fa-comment-dots{--fa:"\f4ad"}
.fa-comment-sms{--fa:"\f7cd"}
.fa-compass{--fa:"\f14e"}
.fa-envelope{--fa:"\f0e0"}
.fa-eye{--fa:"\f06e"}
.fa-file-signature{--fa:"\f573"}
.fa-film{--fa:"\f008"}
.fa-gem{--fa:"\f3a5"}
.fa-globe{--fa:"\f0ac"}
.fa-hand-pointer{--fa:"\f25a"}
.fa-hashtag{--fa:"\23"}
.fa-images{--fa:"\f302"}
.fa-laptop-code{--fa:"\f5fc"}
.fa-lightbulb{--fa:"\f0eb"}
.fa-location-dot{--fa:"\f3c5"}
.fa-message{--fa:"\f27a"}
.fa-mobile-screen-button{--fa:"\f3cd"}
.fa-money-bill-trend-up{--fa:"\e529"}
.fa-phone-volume{--fa:"\f2a0"}
.fa-play{--fa:"\f04b"}
.fa-plus{--fa:"\2b"}
.fa-rocket{--fa:"\f135"}
.fa-rss{--fa:"\f09e"}
.fa-seedling{--fa:"\f4d8"}
.fa-shield-heart{--fa:"\e574"}
.fa-star{--fa:"\f005"}
.fa-tree{--fa:"\f1bb"}
.fa-users{--fa:"\f0c0"}
.fa-users-viewfinder{--fa:"\e595"}
.fa-video{--fa:"\f03d"}
.fa-wand-magic-sparkles{--fa:"\e2ca"}
.fa-wheat-awn{--fa:"\e2cd"}
.fa-window-maximize{--fa:"\f2d0"}
.fa-xmark{--fa:"\f00d"}

/* Existing production CSS */
:root { color-scheme: dark; }
    * { box-sizing: border-box; }
    body { margin: 0; font-family: Inter, sans-serif; background: #080710; color: #f8fafc; }

    /* Moving background layer */
    html, body { min-height: 100%; background: #080710; }
    body { position: relative; isolation: isolate; }
    #bg-canvas {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      z-index: 1;
      opacity: 1;
      pointer-events: none;
      display: block;
    }
    .site-atmosphere {
      position: fixed;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      overflow: hidden;
    }
    main, footer, header { position: relative; z-index: 10; }
    section { position: relative; }
    
    /* Interactive Background Aurora Glow Nodes */
    .bg-aura-pink {
      background: radial-gradient(circle, rgba(230, 46, 122, 0.28) 0%, transparent 70%);
      animation: drift-pink 22s ease-in-out infinite alternate;
    }
    .bg-aura-purple {
      background: radial-gradient(circle, rgba(124, 58, 237, 0.24) 0%, transparent 70%);
      animation: drift-purple 28s ease-in-out infinite alternate;
    }

    @keyframes drift-pink {
      0% { transform: translate(0px, 0px) scale(1); }
      50% { transform: translate(12vw, 15vh) scale(1.2); }
      100% { transform: translate(-8vw, 30vh) scale(0.9); }
    }
    @keyframes drift-purple {
      0% { transform: translate(0px, 0px) scale(1.1); }
      50% { transform: translate(-15vw, 25vh) scale(0.85); }
      100% { transform: translate(10vw, -10vh) scale(1.2); }
    }

    ::-webkit-scrollbar { width: 9px; }
    ::-webkit-scrollbar-track { background: #080710; }
    ::-webkit-scrollbar-thumb { background: #2a293c; border-radius: 999px; }
    ::-webkit-scrollbar-thumb:hover { background: #e62e7a; }
    
    .glass { background: rgba(17,17,30,.88); backdrop-filter: blur(18px); }
    .gradient-text { background: linear-gradient(90deg,#ff3c8c,#a855f7); -webkit-background-clip: text; color: transparent; }
    
    .hero-grid {
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 50px 50px;
    }
    
    .service-card:hover .service-icon { transform: translateY(-4px) scale(1.04); }
    .service-icon { transition: .25s ease; }
    .floating { animation: float 6s ease-in-out infinite; }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
    

    @media (max-width: 640px) {
      .hero-phone-wrap .hero-phone-shell { padding: 10px; }
      .hero-phone-wrap .screen-overlay { background: linear-gradient(180deg, rgba(8,7,16,.00) 0%, rgba(8,7,16,.18) 40%, rgba(8,7,16,.45) 100%); }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto !important; }
      .bg-aura-pink, .bg-aura-purple { animation-duration: 60s !important; }
    }

    .phone-shell {
      background: linear-gradient(180deg, #23233a 0%, #121222 100%);
      box-shadow: 0 30px 80px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.05);
    }
    .screen-overlay {
      background: linear-gradient(180deg, rgba(8,7,16,.00) 0%, rgba(8,7,16,.15) 38%, rgba(8,7,16,.35) 100%);
    }
    .glow-panel {
      background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }

    h1,h2,h3,h4,summary { color:#fff; }
    .service-card, article, details { box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
    img, video { filter: saturate(1.08) contrast(1.06); }

    .hero-copy { text-shadow: 0 8px 34px rgba(0,0,0,.22); }
    .hero-panel { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
    .hero-mini p { color: #d1d5db; }
    .hero-mini small { color: #9ca3af; }
    .hero-skyline-layer {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border-radius: 38px;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(circle at 18% 20%, rgba(230,46,122,.18), transparent 32%),
        radial-gradient(circle at 82% 30%, rgba(124,58,237,.18), transparent 36%),
        linear-gradient(160deg, rgba(28,19,45,.78), rgba(8,7,16,.92));
    }
    .hero-skyline-layer img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 55%;
      opacity: 1;
      filter: saturate(1.18) contrast(1.08) brightness(.98);
      mix-blend-mode: screen;
    }
    .hero-skyline-layer::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(8,7,16,.06) 0%, rgba(8,7,16,.02) 24%, rgba(8,7,16,.18) 55%, rgba(8,7,16,.9) 100%),
        radial-gradient(circle at 50% 70%, rgba(230,46,122,.08), transparent 32%);
      z-index: 1;
    }
    .hero-stage-grid {
      position: relative;
      z-index: 2;
    }

    .growth-visual-card {
      background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 45px rgba(0,0,0,.22);
    }
    .growth-bar {
      transform-origin: bottom;
      animation: growth-pulse 4.5s ease-in-out infinite alternate;
    }
    .growth-bar:nth-child(2) { animation-delay: -.8s; }
    .growth-bar:nth-child(3) { animation-delay: -1.6s; }
    .growth-bar:nth-child(4) { animation-delay: -2.4s; }
    .growth-bar:nth-child(5) { animation-delay: -3.2s; }
    @keyframes growth-pulse { from { transform: scaleY(.82); opacity: .65; } to { transform: scaleY(1); opacity: 1; } }

    /* Custom slider styling */
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #e62e7a;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(230, 46, 122, 0.8);
      transition: transform 0.15s ease-in-out;
    }
    input[type="range"]::-webkit-slider-thumb:hover {
      transform: scale(1.25);
    }
      .deferred-section { content-visibility: auto; contain-intrinsic-size: 900px; }
    body::before {
      content: "";
      position: fixed;
      inset: -20%;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 22%, rgba(230,46,122,.16), transparent 30%),
        radial-gradient(circle at 82% 38%, rgba(124,58,237,.15), transparent 34%),
        radial-gradient(circle at 48% 88%, rgba(230,46,122,.10), transparent 32%);
      animation: background-wash 18s ease-in-out infinite alternate;
    }
    @keyframes background-wash {
      from { transform: translate3d(-2%, -1%, 0) scale(1); }
      to { transform: translate3d(3%, 2%, 0) scale(1.08); }
    }
  
    .glass-stage {
      position: relative;
      background: linear-gradient(180deg, rgba(15, 14, 34, 0.34), rgba(8, 7, 20, 0.22));
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow:
        0 24px 80px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(255,255,255,0.04);
      backdrop-filter: blur(26px) saturate(145%);
      -webkit-backdrop-filter: blur(26px) saturate(145%);
      overflow: hidden;
    }
    .glass-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 24%, transparent 40%),
        radial-gradient(circle at top left, rgba(255,255,255,0.10), transparent 36%),
        radial-gradient(circle at bottom right, rgba(124,58,237,0.12), transparent 32%);
    }
    .glass-image-card {
      background: linear-gradient(180deg, rgba(18,18,34,0.42), rgba(11,11,24,0.30));
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 14px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter: blur(14px) saturate(130%);
      -webkit-backdrop-filter: blur(14px) saturate(130%);
    }

  

/* Existing final responsive safeguards */

/* Final responsive safeguards — appended after the original production CSS. */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; }
header > div, main > section > div, footer > div { min-width: 0; }

@media (max-width: 1023px) {
  .hero-grid > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .hero-copy {
    max-width: 760px;
    margin-inline: auto;
  }
  .glass-stage {
    width: min(100%, 680px);
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  header > div:first-child {
    min-height: 72px;
    height: auto !important;
    gap: 10px;
  }
  header a[aria-label="Houston Content Creators Home"] {
    flex: 1 1 auto;
    min-width: 0;
  }
  header a[aria-label="Houston Content Creators Home"] > div:last-child {
    min-width: 0;
  }
  header a[aria-label="Houston Content Creators Home"] span:first-child {
    font-size: clamp(.82rem, 3.4vw, 1rem) !important;
  }
  header a[aria-label="Houston Content Creators Home"] span:last-child {
    font-size: 7px !important;
    letter-spacing: .16em !important;
  }
  header button[onclick*="openProjectModal"] {
    white-space: nowrap;
    padding-inline: 12px !important;
  }

  .hero-grid {
    padding-top: 104px !important;
    padding-bottom: 52px !important;
  }
  .hero-copy {
    text-align: center !important;
  }
  .hero-copy > div:first-child {
    margin-inline: auto;
  }
  .hero-copy h1 {
    max-width: 100% !important;
    font-size: clamp(2.25rem, 11vw, 4rem) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere;
  }
  .hero-copy > p {
    margin-inline: auto;
    font-size: .95rem !important;
  }
  .hero-copy > div:nth-of-type(2) {
    width: 100%;
  }
  .hero-copy > div:nth-of-type(2) button {
    width: 100%;
    min-height: 50px;
  }
  .hero-mini {
    grid-template-columns: 1fr !important;
    max-width: 440px !important;
    margin-inline: auto;
  }
  .hero-mini > div {
    justify-content: flex-start;
    text-align: left;
  }

  .glass-stage {
    width: 100%;
    max-width: 430px !important;
    padding: 12px !important;
    border-radius: 28px !important;
  }
  .glass-stage > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .glass-stage > div > div:first-child,
  .glass-stage > div > div:last-child {
    display: none !important;
  }
  .glass-stage .phone-shell {
    width: 100%;
    max-width: 290px;
    margin-inline: auto;
  }
  .glass-stage .phone-shell > div:last-child {
    height: min(520px, 68vh) !important;
    min-height: 430px;
  }

  #projectModal {
    align-items: flex-start !important;
    overflow-y: auto;
    padding: 12px !important;
  }
  #projectModal > div {
    max-height: none !important;
    margin-block: 12px;
    padding: 20px !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 479px) {
  header button[onclick*="openProjectModal"] {
    font-size: 10px !important;
    line-height: 1 !important;
    width: auto;
    min-width: 96px;
    height: 44px;
    padding: 0 11px !important;
    border-radius: 9999px !important;
    letter-spacing: .035em !important;
  }
  header button[onclick*="openProjectModal"] i {
    margin: 0 5px 0 0 !important;
    font-size: 12px;
  }
  .hero-copy h1 {
    font-size: clamp(2rem, 12vw, 3rem) !important;
  }
  .glass-stage {
    padding: 8px !important;
  }
  .glass-stage .phone-shell {
    max-width: 260px;
  }
}


    @media (max-width: 1360px) and (min-width: 1024px) {
      .hero-stage {
        max-width: 520px !important;
        padding: 1rem !important;
      }
      .hero-phone-wrap {
        max-width: 250px !important;
      }
      .hero-phone-shell {
        padding: 0.625rem !important;
      }
      .hero-side-card {
        transform: scale(0.94);
        transform-origin: center;
      }
    }

    @media (max-width: 1180px) and (min-width: 1024px) {
      .hero-stage {
        max-width: 480px !important;
      }
      .hero-stage-grid {
        grid-template-columns: 1fr !important;
      }
      .hero-side-column {
        display: none !important;
      }
    }


/* Existing responsive background tuning */

    .bg-aura-teal {
      background: radial-gradient(circle, rgba(45, 212, 191, 0.18) 0%, transparent 68%);
      animation: drift-teal 26s ease-in-out infinite alternate;
    }
    .bg-aura-lilac {
      background: radial-gradient(circle, rgba(196, 181, 253, 0.18) 0%, transparent 68%);
      animation: drift-lilac 30s ease-in-out infinite alternate-reverse;
    }
    @keyframes drift-teal {
      0% { transform: translate(0, 0) scale(0.95); }
      50% { transform: translate(-6vw, 10vh) scale(1.12); }
      100% { transform: translate(8vw, -8vh) scale(0.88); }
    }
    @keyframes drift-lilac {
      0% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(-10vw, -6vh) scale(1.15); }
      100% { transform: translate(6vw, 12vh) scale(0.9); }
    }

    body::before {
      animation-duration: 22s;
      animation-timing-function: ease-in-out;
    }
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(120deg, transparent 20%, rgba(230,46,122,.07) 50%, transparent 80%),
        linear-gradient(300deg, transparent 15%, rgba(124,58,237,.06) 45%, transparent 75%);
      background-size: 220% 220%, 180% 180%;
      mix-blend-mode: screen;
      opacity: .55;
      animation: beam-sweep 24s linear infinite alternate;
    }
    @keyframes beam-sweep {
      from { background-position: 0% 0%, 100% 100%; }
      to { background-position: 100% 100%, 0% 0%; }
    }

    @media (max-width: 1180px) {
      .hero-stage-grid {
        grid-template-columns: 1fr !important;
      }
      .hero-side-column {
        display: none !important;
      }
      .hero-phone-wrap {
        max-width: 320px !important;
        margin-inline: auto !important;
      }
      .hero-stage {
        max-width: 760px !important;
        margin-inline: auto !important;
      }
      .hero-copy {
        text-align: center !important;
      }
      .hero-copy > div:first-child,
      .hero-copy > div:nth-of-type(2),
      .hero-mini {
        margin-left: auto !important;
        margin-right: auto !important;
      }
      .hero-mini {
        max-width: 520px !important;
      }
      .hero-copy > div:nth-of-type(2) {
        justify-content: center !important;
      }
    }

    @media (max-width: 980px) {
      .showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(900px, calc(100% - 28px)) !important;
      }
      .showcase-card {
        min-height: 100%;
      }
    }

    @media (max-width: 720px) {
      .hero-grid {
        padding-top: 92px !important;
        padding-bottom: 42px !important;
      }
      .hero-copy h1 {
        font-size: clamp(2.05rem, 11vw, 3rem) !important;
      }
      .hero-copy p {
        margin-inline: auto !important;
        max-width: 38rem;
      }
      .hero-copy > div:nth-of-type(2) {
        flex-direction: column !important;
      }
      .hero-copy > div:nth-of-type(2) button,
      .hero-copy > div:nth-of-type(2) a {
        width: 100% !important;
      }
      .hero-mini {
        grid-template-columns: 1fr !important;
        max-width: 460px !important;
      }
      .hero-stage {
        padding: 10px !important;
        border-radius: 28px !important;
      }
      .glass-stage .phone-shell {
        max-width: 290px !important;
      }
      .glass-stage .phone-shell > div:last-child {
        height: min(500px, 68vh) !important;
        min-height: 390px !important;
      }
      .showcase-grid {
        grid-template-columns: 1fr !important;
        width: min(620px, calc(100% - 20px)) !important;
      }
      .content-showcase {
        padding: 52px 0 58px;
      }
      .showcase-copy {
        font-size: 13px;
      }
    }

    @media (max-width: 520px) {
      header .mx-auto {
        height: auto !important;
        min-height: 72px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
      }
      .hero-grid {
        padding-top: 82px !important;
      }
      .hero-mini {
        gap: 12px !important;
      }
      .showcase-heading {
        padding-inline: 10px;
      }
      .showcase-title {
        font-size: clamp(26px, 9vw, 40px) !important;
      }
      .showcase-card {
        padding: 12px !important;
        border-radius: 22px !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .bg-aura-pink,
      .bg-aura-purple,
      .bg-aura-teal,
      .bg-aura-lilac,
      body::before,
      body::after {
        animation-duration: 80s !important;
      }
      #bg-canvas {
        opacity: .55 !important;
      }
    }
  
/* Accessibility and contrast refinements with no layout change */
button.bg-brandPink,.area-btn.active{background-color:#d91f6c}
.text-gray-500{color:#9ca3af}
.text-gray-400{color:#a8afbb}
:focus-visible{outline:2px solid #f472b6;outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Safe runtime performance refinements */
@media (max-width: 640px) {
  .site-atmosphere { opacity: .88; }
  .glass, .glass-stage { backdrop-filter: blur(14px) saturate(125%); -webkit-backdrop-filter: blur(14px) saturate(125%); }
}
@media (prefers-reduced-motion: reduce) {
  .floating, .growth-bar { animation: none !important; }
}