@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700&display=swap');

:root {

  --color-cyan-400:    oklch(78.9% .154 211.53);
  --color-violet-100:  oklch(94.3% .029 294.588);
  --color-violet-300:  oklch(81.1% .111 293.571);
  --color-violet-400:  oklch(70.2% .183 293.541);
  --color-violet-500:  oklch(60.6% .25  292.717);
  --color-violet-700:  oklch(49.1% .27  292.581);
  --color-purple-400:  oklch(71.4% .203 305.504);
  --color-zinc-600:    oklch(44.2% .017 285.786);
  --color-neutral-300: oklch(87% 0 0);
  --color-neutral-400: oklch(70.8% 0 0);
  --color-white:       #fff;

  --bg:          #060606;
  --violet-400:  var(--color-violet-400);
  --violet-500:  var(--color-violet-500);
  --cyan-400:    var(--color-cyan-400);
  --neutral-400: var(--color-neutral-400);

  --font-unbounded: 'Unbounded', sans-serif;
  --font-neue:      'Neue-Bold', sans-serif;

  --ease-spring: cubic-bezier(.175,.885,.32,1.275);
  --ease-out:    cubic-bezier(0,.8,.26,.99);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
}

@font-face {
  font-family: 'Neue-Bold';
  font-display: swap;
  src: url('/NeueBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; }
body { font-family: var(--font-unbounded); background: var(--bg); color: rgba(255,255,255,0.85); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; border: none; border-radius: 0; outline: none; }
img, svg, video { display: block; max-width: 100%; }
::-webkit-scrollbar { display: none; }

.flex-rcc  { display: flex; flex-direction: row;    justify-content: center;     align-items: center; }
.flex-rcs  { display: flex; flex-direction: row;    justify-content: flex-start; align-items: center; }
.flex-col-ss { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.flex-col-sc { display: flex; flex-direction: column; justify-content: center;     align-items: flex-start; }
.flex-col-cc { display: flex; flex-direction: column; justify-content: center;     align-items: center; }
.f { width: 100%; height: 100%; }

.mp-c1 {
  z-index: 10;
  display: flex; flex-direction: row;
  justify-content: center; align-items: center;
  width: 100%;
}
.mp-c2 {
  z-index: 15;
  width: 100%; max-width: 1370px; height: 100%;
  padding-inline: 1rem;
}
@media (min-width: 64rem) { .mp-c2 { padding-inline: 0; } }

.smooth      { will-change:transform; transition:all 1.4s cubic-bezier(.175,.885,.32,1.275); }

.smooth-fast { will-change:transform; transition:all .2s cubic-bezier(0,.8,.26,.99); }

.smooth-to   { will-change:transform; transition:all .5s ease-in-out; }

@keyframes fade-in-up     { 0%{opacity:0;transform:scale(.93)translateY(-33px)} to{opacity:1;transform:none} }
@keyframes fade-in-down   { 0%{opacity:0;transform:scale(.93)translateY(33px)}  to{opacity:1;transform:none} }
@keyframes fade-in-left   { 0%{opacity:0;transform:scale(.93)translate(-22px)}  to{opacity:1;transform:none} }
@keyframes fade-in-right  { 0%{opacity:0;transform:scale(.93)translate(22px)}   to{opacity:1;transform:none} }
@keyframes fade-out-down  { 0%{opacity:1;transform:none} to{opacity:0;transform:scale(.93)translateY(33px)} }
@keyframes fade-in-small-custom { 0%{opacity:0} to{opacity:1} }
@keyframes fade-in-custom { 0%{opacity:0;transform:scale(.93)} to{opacity:1;transform:scale(1)} }
@keyframes fade-out-custom{ 0%{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.93)} }
@keyframes fade-in-dash   { 0%{opacity:0;transform:translateY(44px)scale(.95)} to{opacity:1;transform:none} }
@keyframes fade-out-dash  { 0%{opacity:1;transform:none} to{opacity:0;transform:translateY(44px)scale(.95)} }
@keyframes anim-scale      { 0%{transform:scale(1.15)} 50%{transform:scale(1.05)} to{transform:scale(1.15)} }
@keyframes pulse-dot       { 0%,100%{opacity:1} 50%{opacity:.3} }

.anim-fadein-up     { will-change:transform; animation:1.2s both fade-in-up; }
.anim-fadein-down   { will-change:transform; animation:1.2s both fade-in-down; }
.anim-fadein-left   { will-change:transform; animation:1.2s both fade-in-left; }
.anim-fadein-right  { will-change:transform; animation:1.2s both fade-in-right; }
.anim-fadeout-down  { will-change:transform; animation:1.2s both fade-out-down; }
.anim-fadein-small  { animation:1.3s fade-in-small-custom; }
.anim-fadein        { will-change:transform; animation:.9s both fade-in-custom; }
.anim-fadeout       { will-change:transform; animation:.5s both fade-out-custom; }
.anim-dash-fadein   { will-change:transform; animation:.6s both fade-in-dash; }
.anim-dash-fadeout  { will-change:transform; animation:.6s both fade-out-dash; }
.anim-scale         { will-change:transform; animation:5s infinite anim-scale; }

.bg-1 { background: radial-gradient(circle at top, #c6a6ff, #8642ff 33%, #6d00ff); }
.bg-danger  { background: radial-gradient(105.38% 145.07% at 41.4% 40.19%, rgba(255,18,18,.12) 0, rgba(255,106,169,0) 65%); }
.bg-success { background: radial-gradient(105.38% 145.07% at 41.4% 40.19%, rgba(148,255,18,.10) 0, rgba(255,106,169,0) 65%); }
.bg-blur    { backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }

.card:hover {
  transition: all .2s cubic-bezier(0,.8,.26,.99);
  transform: perspective(500px) rotateX(3deg) scale(1.12);
}

.slider { -webkit-appearance:none; -moz-appearance:none; appearance:none; width:100%; height:6px; background:rgba(255,255,255,.10); border-radius:10px; cursor:pointer; }
.slider::-webkit-slider-thumb {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  cursor:pointer;
  background: linear-gradient(135deg, #8e43ff, #00b8db);
  border: 2px solid rgba(255,255,255,.10);
  border-radius: 50%; width:20px; height:20px;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(142,67,255,.30);
}
.slider::-webkit-slider-thumb:hover { transform:scale(1.1); box-shadow:0 6px 16px rgba(142,67,255,.40); }
.slider::-moz-range-thumb {
  background: linear-gradient(135deg, #8e43ff, #00b8db);
  border-radius:50%; width:20px; height:20px;
  transition:all .2s; box-shadow:0 4px 12px rgba(142,67,255,.30); border:none;
}
.slider::-moz-range-thumb:hover { transform:scale(1.1); box-shadow:0 6px 16px rgba(142,67,255,.40); }
.slider::-webkit-slider-track { background:rgba(255,255,255,.10); border-radius:10px; height:6px; }
.slider::-moz-range-track    { background:rgba(255,255,255,.10); border:none; border-radius:10px; height:6px; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; text-align: center; }

.btn-hx {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  border: 1px solid rgba(166,133,255,.07);
  background: rgba(166,133,255,.06);
  padding: 12px 20px; border-radius: 20px; font-size: 17px;
  cursor: pointer; font-family: var(--font-unbounded);
  color: rgba(237,233,254,.65);
  transition: all 1.4s var(--ease-spring);
  will-change: transform;
}
.btn-hx:hover { background: rgba(196,180,255,.1); color: rgba(237,233,254,.85); opacity: .9; transform: scale(.98); }
.btn-hx:active { transform: scale(.92); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 17px;
  border: 2px solid rgba(82,82,92,.05);
  border-radius: 25px; padding: 18px 32px;
  font-family: var(--font-unbounded); font-size: 19px;
  color: rgba(255,255,255,.6); cursor: pointer;
  transition: all 1.4s var(--ease-spring);
  will-change: transform;
}
.btn-ghost:hover { border-color: rgba(82,82,92,.1); color: rgba(255,255,255,.7); transform: scale(.98); }
.btn-ghost:active { transform: scale(.94); }

.tabs-hx {
  display: flex; flex-direction: row; gap: 12px;
  background: rgba(255,255,255,.02); border-radius: 28px;
  padding: 12px 13px;
}
@media (min-width: 40rem) { .tabs-hx { flex-direction: row; gap: 24px; } }

.tab-hx {
  border: 1px solid transparent; background: transparent;
  padding: 12px 20px; font-size: 17px; border-radius: 20px;
  cursor: pointer; font-family: var(--font-unbounded);
  color: rgba(255,255,255,.4);
  display: flex; align-items: center; gap: 14px;
  transition: all 1.4s var(--ease-spring); will-change: transform;
}
.tab-hx:hover { background: rgba(255,255,255,.06); transform: scale(.98); }
.tab-hx:active { transform: scale(.92); }
.tab-hx.active {
  background: rgba(166,133,255,.11);
  border-color: rgba(166,133,255,.07);
  color: rgba(255,255,255,.8); opacity: .9;
}

.plan-card {
  width: 100%; position: relative;
  border: 2px solid rgba(255,255,255,.02);
  border-radius: 24px; overflow: hidden;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(255,255,255,.01);
  transition: all .2s var(--ease-out); will-change: transform;
}
.plan-card:hover {
  border-color: rgba(255,255,255,.04);
  backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px);
  transform: perspective(500px) rotateX(3deg) scale(1.04);
}

.plan-glow {
  position: absolute; top: 0; z-index: 1;
  will-change: transform; transform: scale(1.15);
  animation: 5s infinite anim-scale;
  opacity: 0; transition: opacity 1.4s var(--ease-spring);
}
.plan-card:hover .plan-glow { opacity: 1; }

.footer-hx {
  width: 100%; max-width: 1370px;
  border: 2px solid rgba(255,255,255,.02);
  background: rgba(255,255,255,.01);
  border-radius: 24px; padding: 18px 24px;
  margin-inline: 1rem;
  transition: border-color 1.4s var(--ease-spring);
}
.footer-hx:hover { border-color: rgba(255,255,255,.04); }
@media (min-width: 64rem) { .footer-hx { margin-inline: 0; } }

.hero-blob {
  position: absolute; z-index: 0;
  height: 100%; top: 150px; left: -30px; width: 100%;
  overflow: hidden; filter: blur(90px);
  animation: 1.3s fade-in-small;
  pointer-events: none;
}
.hero-blob-inner {
  margin-inline: auto;
  aspect-ratio: 1155/578;
  width: 72.1875rem;
  background: linear-gradient(to top right, var(--purple-400), var(--violet-700));
  opacity: 0.20;
  clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 61.26% 58.3%, 54.38% 65.27%, 47.5% 58.3%, 32.95% 32.5%, 15.25% 74.7%, 0% 69.65%, 13.32% 99.84%, 28.18% 71.58%, 76.1% 97.7%, 75.94% 46.09%);
}

.stats-sep { width: 100%; max-width: 150px; height: 1px; background: rgba(255,255,255,.05); }
@media (max-width: 63.99rem) { .stats-sep { display: none; } }

.ctor-input {
  width: 70px; text-align: right;
  background: transparent; border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 4px 8px;
  color: rgba(255,255,255,.9); font-family: var(--font-neue); font-size: 20px;
}
.ctor-label { font-family: var(--font-unbounded); font-size: 18px; color: rgba(255,255,255,.7); }
.ctor-unit  { font-family: var(--font-neue); font-size: 24px; color: rgba(255,255,255,.9); width: 50px; text-align: right; }

.alert { padding: 12px 16px; border-radius: 12px; font-size: 14px; margin-bottom: 16px; }
.alert-success { background: rgba(148,255,18,.08); border: 1px solid rgba(148,255,18,.2); color: #94ff12; }
.alert-danger  { background: rgba(255,18,18,.08);  border: 1px solid rgba(255,18,18,.2);  color: #ff6a6a; }
.alert-info    { background: rgba(166,133,255,.08); border: 1px solid rgba(166,133,255,.2); color: var(--violet-400); }

.auth-card {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06);
  border-radius: 24px; padding: 40px 36px; width: 100%; max-width: 440px;
}

.input-hx {
  width: 100%; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 14px 16px; font-size: 15px; font-family: var(--font-unbounded);
  color: rgba(255,255,255,.9); transition: border-color .3s;
}
.input-hx:focus { border-color: rgba(166,133,255,.4); outline: none; }
.input-hx::placeholder { color: rgba(255,255,255,.3); }

/* Темная отрисовка <select> и его выпадающего списка. Браузер рисует
   <option> в белом по умолчанию — задаём явно. */
select.input-hx {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.input-hx option,
select option {
  background: #1a1a22;
  color: rgba(255,255,255,.9);
}

.label-hx { font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 6px; display: block; }

.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse-dot 2s infinite; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-family: var(--font-unbounded); }
.badge-open   { background: rgba(166,133,255,.12); border: 1px solid rgba(166,133,255,.25); color: var(--violet-400); }
.badge-closed { background: rgba(255,255,255,.05);  border: 1px solid rgba(255,255,255,.1);   color: rgba(255,255,255,.4); }
.badge-pending{ background: rgba(255,200,0,.08);    border: 1px solid rgba(255,200,0,.2);      color: #ffc800; }

.tbl { width: 100%; border-collapse: collapse; font-family: var(--font-unbounded); font-size: 14px; }
.tbl th { color: rgba(255,255,255,.4); font-weight: 400; padding: 10px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.05); }
.tbl td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.03); color: rgba(255,255,255,.8); }
.tbl tr:hover td { background: rgba(255,255,255,.02); }

.sidebar {
  width: 220px; flex-shrink: 0;
  background: rgba(255,255,255,.01);
  border-right: 1px solid rgba(255,255,255,.04);
  padding: 24px 16px; min-height: 100vh;
  display: flex; flex-direction: column; gap: 6px;
}
.sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  font-size: 14px; color: rgba(255,255,255,.45);
  cursor: pointer; transition: all .2s;
}
.sidebar-item:hover { background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); }
.sidebar-item.active { background: rgba(166,133,255,.1); border: 1px solid rgba(166,133,255,.12); color: rgba(166,133,255,.9); }

.balance-card {
  background: rgba(166,133,255,.06); border: 1px solid rgba(166,133,255,.12);
  border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 8px;
}
.balance-amount { font-family: var(--font-neue); font-size: 42px; color: rgba(255,255,255,.95); }
.balance-label  { font-size: 13px; color: rgba(255,255,255,.4); }

.nav-hx {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,6,6,.8); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.04);
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { font-family: var(--font-unbounded); font-size: 20px; font-weight: 700; color: rgba(255,255,255,.9); }

.msg-bubble {
  padding: 14px 18px; border-radius: 16px; max-width: 80%;
  font-size: 14px; line-height: 1.6;
}
.msg-user   { background: rgba(166,133,255,.12); border: 1px solid rgba(166,133,255,.15); align-self: flex-end; }
.msg-staff  { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); align-self: flex-start; }
.msg-time   { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 4px; }

.btn-admin {
  padding: 8px 14px; border-radius: 10px; font-size: 13px;
  border: 1px solid; cursor: pointer; transition: all .2s;
  font-family: var(--font-unbounded);
}
.btn-admin-primary { border-color: rgba(166,133,255,.3); color: var(--violet-400); background: rgba(166,133,255,.07); }
.btn-admin-primary:hover { background: rgba(166,133,255,.15); }
.btn-admin-danger  { border-color: rgba(255,80,80,.3); color: #ff5050; background: rgba(255,80,80,.06); }
.btn-admin-danger:hover { background: rgba(255,80,80,.12); }

.select-none { user-select: none; -webkit-user-select: none; }
.select-text { user-select: text; }
.transform-gpu { transform: translateZ(0); }
.will-change-transform { will-change: transform; }
.will-change-backdrop { will-change: backdrop-filter; }
.overflow-hidden { overflow: hidden; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.underline-offset-2 { text-underline-offset: 2px; }

.font-unbounded { font-family: var(--font-unbounded); }
.font-neue      { font-family: var(--font-neue); }

.text-violet   { color: var(--violet-400); }
.text-cyan     { color: var(--cyan-400); }
.text-dim      { color: rgba(255,255,255,.4); }
.text-mid      { color: rgba(255,255,255,.65); }
.text-bright   { color: rgba(255,255,255,.9); }
.text-neutral  { color: var(--neutral-400); }

.plans-grid {
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  gap: 24px;
}
@media (min-width: 64rem) {
  .plans-grid { flex-direction: row; gap: 32px; }
}

.heading-hero {
  font-family: var(--font-unbounded);
  font-size: 32px; line-height: 40px; font-weight: 600;
  color: rgba(255,255,255,.85);
}
@media (min-width: 40rem) { .heading-hero { font-size: 40px; line-height: 50px; } }
@media (min-width: 48rem) { .heading-hero { font-size: 50px; line-height: 60px; } }
@media (min-width: 64rem) { .heading-hero { font-size: 60px; line-height: 70px; } }

.accent-cyan   { color: rgba(0,210,239,.8);  filter: drop-shadow(0 0 30px rgba(0,184,219,.6)); }
.accent-purple { color: rgba(192,126,255,.85); filter: drop-shadow(0 0 50px #ad46ff); }

.desc-hero {
  font-family: var(--font-unbounded);
  font-size: 16px; color: rgba(255,255,255,.7);
}
@media (min-width: 40rem) { .desc-hero { font-size: 20px; } }
@media (min-width: 48rem) { .desc-hero { font-size: 25px; } }
@media (min-width: 64rem) { .desc-hero { font-size: 29px; } }
.desc-hero .fn { font-family: var(--font-neue); }
@media (min-width: 40rem) { .desc-hero .fn { font-size: 25px; } }
@media (min-width: 48rem) { .desc-hero .fn { font-size: 30px; } }
@media (min-width: 64rem) { .desc-hero .fn { font-size: 36px; } }

.desc-accent { color: rgba(166,133,255,.9); }

@media (hover: hover) {
  .group:hover .group-hover\:scale-115   { scale: 115%; }
  .group:hover .group-hover\:opacity-100 { opacity: 1; }
  .hover\:scale-98:hover  { scale: 98%; }
  .hover\:scale-99:hover  { scale: 99%; }
  .hover\:opacity-90:hover { opacity: .9; }

  .hover\:border-white4:hover  { border-color: rgba(255,255,255,.04); }
  .hover\:border-zinc7:hover   { border-color: rgba(82,82,92,.07); }
  .hover\:border-zinc10:hover  { border-color: rgba(82,82,92,.10); }

  .hover\:bg-violet10:hover    { background-color: rgba(196,180,255,.10); }
  .hover\:bg-white6:hover      { background-color: rgba(255,255,255,.09); }

  .hover\:text-violet85:hover  { color: rgba(237,233,254,.85); }
  .hover\:text-white60:hover   { color: rgba(255,255,255,.60); }
  .hover\:text-white70:hover   { color: rgba(255,255,255,.70); }

  .hover\:backdrop-blur-100:hover {
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
  }
}

.active\:scale-92:active { scale: 92%; }
.active\:scale-94:active { scale: 94%; }

.no-spinner { -webkit-appearance:textfield; -moz-appearance:textfield; appearance:textfield; }
.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

.opacity-0   { opacity: 0; }
.opacity-20  { opacity: .20; }
.opacity-90  { opacity: .90; }

.scale-115 { scale: 115%; }

.top-150    { top: 150px; }
.left-n30   { left: -30px; }

.border-w2  { border-color: rgba(255,255,255,.05); }

.border-w4  { border-color: rgba(255,255,255,.10); }

.border-v7  { border-color: rgba(166,133,255,.12); }

.border-z5  { border-color: rgba(82,82,92,.13); }

.bg-w1  { background-color: rgba(255,255,255,.03); }

.bg-w2  { background-color: rgba(255,255,255,.05); }

.bg-w5  { background-color: rgba(255,255,255,.13); }

.bg-w10 { background-color: rgba(255,255,255,.26); }

.bg-v6  { background-color: rgba(166,133,255,.15); }

.bg-v11 { background-color: rgba(166,133,255,.28); }

.text-w40 { color: rgba(255,255,255,.40); }

.text-w50 { color: rgba(255,255,255,.50); }

.text-w60 { color: rgba(255,255,255,.60); }

.text-w65 { color: rgba(255,255,255,.65); }

.text-w70 { color: rgba(255,255,255,.70); }

.text-w80 { color: rgba(255,255,255,.80); }

.text-w85 { color: rgba(255,255,255,.85); }

.text-w90 { color: rgba(255,255,255,.90); }

.text-n94  { color: rgba(212,212,212,.94); }

.text-cyan80 { color: rgba(0,210,239,.80); }

.text-pur85  { color: rgba(192,126,255,.85); }

.text-v165   { color: rgba(237,233,254,.65); }

.text-v490   { color: rgba(166,133,255,.90); }

.text-v5     { color: rgba(142,67,255,1); }

.text-n400   { color: #b4b4b4; }

.drop-cyan   { filter: drop-shadow(0 0 30px #00b8db99); }
.drop-violet { filter: drop-shadow(0 0 50px #ad46ff); }

.clip-hero {
  clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 61.26% 58.3%, 54.38% 65.27%, 47.5% 58.3%, 32.95% 32.5%, 15.25% 74.7%, 0% 69.65%, 13.32% 99.84%, 28.18% 71.58%, 76.1% 97.7%, 75.94% 46.09%);
}

.screen {
  display:flex; justify-content:center; align-items:flex-start;
  width:100%; height:100vh;
}
.screen-container {
  display:flex; flex-direction:column; justify-content:flex-start;
  align-items:center; width:100%; height:100%;
}
@media (min-width:64rem)  { .screen-container { max-width:1000px; } }
@media (min-width:80rem)  { .screen-container { max-width:1300px; } }
@media (min-width:96rem)  { .screen-container { max-width:1650px; } }

.lg-only { display:none; }
@media (min-width:64rem) {
  .lg-only      { display:block; }
  .lg-flex      { display:flex; }
  .lg-flex-row  { flex-direction:row !important; }
  .lg-mx-0      { margin-inline:0; }
  .lg-px-0      { padding-inline:0; }
  .lg-gap-0     { gap:0; }
  .lg-gap-24    { gap:24px; }
  .lg-gap-32    { gap:32px; }
  .lg-gap-48    { gap:48px; }
  .lg-text-left { text-align:left; }
}
@media (min-width:40rem) {
  .sm-flex-row  { flex-direction:row !important; }
  .sm-gap-18    { gap:18px; }
  .sm-gap-24    { gap:24px; }
  .sm-gap-48    { gap:48px; }
}

.gradient-hero {
  background-image: linear-gradient(
    to top right in oklab,
    oklch(71.4% .203 305.504),
    oklch(49.1% .27  292.581)
  );
}

.plans-grid { align-items: stretch; }
.plans-grid .plan-card { height: 100%; }

.order-plans-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap: 24px;
  align-items: stretch;
  width: 100%;
}
.order-plans-grid .plan-card { height: 100%; min-width: 0; }
@media (min-width: 64rem) { .order-plans-grid { gap: 32px; } }

.order-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.order-detail-card { min-width: 0; }
.order-detail-form { min-width: 0; }
@media (min-width: 48rem) {
  .order-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
}