:root {
  --bg: #f5f7fb;
  --surface: rgba(255,255,255,.88);
  --surface-solid: #ffffff;
  --text: #111827;
  --muted: #687386;
  --line: rgba(17,24,39,.08);

  --brand: #635bff;
  --brand-dark: #4d46e5;
  --brand-soft: #eeedff;

  --success: #0c9b68;
  --danger: #d84d4d;

  --shadow:
    0 24px 70px rgba(30, 41, 59, .10);

  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(99,91,255,.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(80,180,255,.13),
      transparent 28%
    ),
    var(--bg);

  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.shell {
  width: min(1160px, calc(100% - 36px));
  margin: 0 auto;
}

.nav {
  height: 84px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;

  text-decoration: none;

  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.03em;
}

.brand-mark {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  color: white;
  font-weight: 800;

  background:
    linear-gradient(
      145deg,
      #776fff,
      #4e45e5
    );

  box-shadow:
    0 9px 24px rgba(99,91,255,.28);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 20px;

  border: 0;
  border-radius: 14px;

  text-decoration: none;
  font-weight: 680;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  color: white;

  background:
    linear-gradient(
      135deg,
      var(--brand),
      var(--brand-dark)
    );

  box-shadow:
    0 10px 26px rgba(99,91,255,.25);
}

.btn-primary:hover {
  box-shadow:
    0 14px 32px rgba(99,91,255,.32);
}

.btn-secondary {
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
}

.btn-full {
  width: 100%;
}

.hero {
  min-height: calc(100vh - 84px);

  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;

  gap: 70px;

  padding: 60px 0 100px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;

  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);

  color: #514ba7;

  font-size: 13px;
  font-weight: 720;
}

.hero h1 {
  max-width: 720px;

  margin: 22px 0 20px;

  font-size: clamp(48px, 6.4vw, 82px);
  line-height: .98;

  letter-spacing: -.065em;
}

.gradient-text {
  background:
    linear-gradient(
      100deg,
      #5148e6,
      #8759e8,
      #2879d8
    );

  color: transparent;

  -webkit-background-clip: text;
  background-clip: text;
}

.hero-copy {
  max-width: 600px;

  margin: 0;

  color: var(--muted);

  font-size: 19px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-top: 32px;
}

.hero-note {
  margin-top: 17px;

  color: var(--muted);
  font-size: 13px;
}

.phone-stage {
  position: relative;

  min-height: 610px;

  display: grid;
  place-items: center;
}

.glow {
  position: absolute;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(99,91,255,.19),
      rgba(99,91,255,0) 68%
    );

  filter: blur(8px);
}

.phone {
  position: relative;

  width: min(330px, 88vw);
  min-height: 590px;

  padding: 12px;

  border-radius: 44px;

  background: #11131a;

  box-shadow:
    0 45px 100px rgba(15,23,42,.22);

  transform: rotate(3deg);

  animation:
    floatPhone 5.5s ease-in-out infinite;
}

@keyframes floatPhone {
  0%,100% {
    transform: translateY(0) rotate(3deg);
  }

  50% {
    transform: translateY(-11px) rotate(2deg);
  }
}

.phone-screen {
  min-height: 566px;

  padding: 24px 19px;

  overflow: hidden;

  border-radius: 34px;

  background:
    linear-gradient(
      180deg,
      #f9faff,
      #eff2f9
    );
}

.phone-time {
  color: #72798a;
  font-size: 12px;
  font-weight: 650;
}

.phone-title {
  margin-top: 70px;

  color: #282e3a;

  text-align: center;

  font-size: 18px;
  font-weight: 750;
}

.notification {
  margin-top: 28px;
  padding: 17px;

  border-radius: 21px;

  background: rgba(255,255,255,.95);

  box-shadow:
    0 16px 35px rgba(31,41,55,.11);
}

.notification-top {
  display: flex;
  align-items: center;
  gap: 11px;
}

.notification-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  background: var(--brand-soft);
  color: var(--brand);

  font-weight: 850;
}

.notification-name {
  font-size: 14px;
  font-weight: 760;
}

.notification-time {
  margin-left: auto;

  color: var(--muted);
  font-size: 11px;
}

.notification h3 {
  margin: 15px 0 5px;

  font-size: 16px;
}

.notification p {
  margin: 0;

  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.mini-card {
  margin-top: 14px;
  padding: 15px;

  border: 1px solid var(--line);
  border-radius: 18px;

  background: rgba(255,255,255,.68);
}

.mini-label {
  color: var(--muted);

  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.mini-value {
  margin-top: 5px;

  font-size: 14px;
  font-weight: 720;
}

.auth-layout {
  min-height: 100vh;

  display: grid;
  grid-template-columns: minmax(330px, .85fr) 1.15fr;
}

.auth-panel {
  position: relative;

  display: flex;
  flex-direction: column;

  padding: 34px clamp(28px, 5vw, 74px);

  background: rgba(255,255,255,.82);
  backdrop-filter: blur(20px);
}

.auth-inner {
  width: min(440px, 100%);
  margin: auto;
}

.auth-title {
  margin: 0 0 11px;

  font-size: clamp(34px, 4vw, 46px);

  letter-spacing: -.045em;
}

.auth-subtitle {
  margin: 0 0 33px;

  color: var(--muted);
  line-height: 1.6;
}

.form-group {
  margin-bottom: 17px;
}

.form-group label {
  display: block;

  margin: 0 0 8px;

  color: #3c4656;

  font-size: 13px;
  font-weight: 680;
}

.input {
  width: 100%;
  height: 54px;

  padding: 0 15px;

  border: 1px solid rgba(30,41,59,.12);
  border-radius: 14px;

  outline: none;

  background: rgba(255,255,255,.92);

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.input:focus {
  border-color: rgba(99,91,255,.65);

  box-shadow:
    0 0 0 4px rgba(99,91,255,.10);
}

.form-message {
  min-height: 22px;

  margin: 8px 0 12px;

  color: var(--danger);

  font-size: 13px;
  line-height: 1.5;
}

.auth-bottom {
  margin-top: 24px;

  color: var(--muted);

  text-align: center;
  font-size: 14px;
}

.auth-bottom a {
  color: var(--brand);

  font-weight: 720;
  text-decoration: none;
}

.benefits {
  display: grid;
  gap: 11px;

  margin: 25px 0 29px;
}

.benefit {
  display: flex;
  align-items: center;
  gap: 11px;

  color: #566172;

  font-size: 14px;
}

.check {
  width: 22px;
  height: 22px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 50%;

  color: var(--success);
  background: #e9f9f2;

  font-size: 12px;
  font-weight: 900;
}

.auth-visual {
  position: relative;

  display: grid;
  place-items: center;

  overflow: hidden;

  padding: 60px;

  color: white;

  background:
    radial-gradient(
      circle at 70% 25%,
      rgba(150,122,255,.8),
      transparent 30%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(58,127,220,.85),
      transparent 35%
    ),
    #171838;
}

.auth-visual-content {
  position: relative;
  z-index: 2;

  width: min(580px, 100%);
}

.auth-visual h2 {
  max-width: 500px;

  margin: 0;

  font-size: clamp(40px, 5vw, 70px);
  line-height: 1;

  letter-spacing: -.06em;
}

.auth-visual p {
  max-width: 500px;

  margin-top: 22px;

  color: rgba(255,255,255,.68);

  font-size: 17px;
  line-height: 1.7;
}

.orb {
  position: absolute;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.16);
}

.orb-one {
  width: 500px;
  height: 500px;

  right: -180px;
  top: -170px;
}

.orb-two {
  width: 670px;
  height: 670px;

  right: -240px;
  top: -250px;
}

.dashboard {
  min-height: 100vh;
}

.dashboard-top {
  border-bottom: 1px solid var(--line);

  background: rgba(255,255,255,.72);

  backdrop-filter: blur(18px);
}

.dashboard-main {
  padding: 52px 0 90px;
}

.dashboard-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 32px;
}

.dashboard-heading h1 {
  margin: 0 0 8px;

  font-size: clamp(34px, 5vw, 50px);

  letter-spacing: -.05em;
}

.dashboard-heading p {
  margin: 0;
  color: var(--muted);
}

.plan-chip {
  padding: 9px 13px;

  border-radius: 999px;

  background: var(--brand-soft);
  color: var(--brand-dark);

  font-size: 12px;
  font-weight: 780;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 24px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);

  background: rgba(255,255,255,.78);

  box-shadow:
    0 18px 55px rgba(15,23,42,.055);

  backdrop-filter: blur(17px);
}

.empty-panel {
  min-height: 420px;

  display: grid;
  place-items: center;

  padding: 42px;

  text-align: center;
}

.empty-icon {
  width: 74px;
  height: 74px;

  display: grid;
  place-items: center;

  margin: 0 auto 19px;

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      #efedff,
      #e5f3ff
    );

  color: var(--brand);

  font-size: 27px;
  font-weight: 820;
}

.empty-panel h2 {
  margin: 0 0 9px;

  font-size: 25px;
  letter-spacing: -.035em;
}

.empty-panel p {
  max-width: 390px;

  margin: 0 auto 23px;

  color: var(--muted);

  line-height: 1.6;
}

.side-panel {
  padding: 25px;
}

.side-panel h3 {
  margin: 0 0 20px;

  font-size: 17px;
}

.usage-number {
  margin-bottom: 6px;

  font-size: 31px;
  font-weight: 780;
  letter-spacing: -.04em;
}

.usage-number span {
  color: var(--muted);

  font-size: 15px;
  font-weight: 580;
}

.usage-bar {
  height: 8px;

  overflow: hidden;

  border-radius: 999px;

  background: #e9ebf2;
}

.usage-fill {
  width: 0%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #665eff,
      #8b6bf0
    );

  transition: width .8s ease;
}

.side-note {
  margin-top: 11px;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.55;
}

.logout {
  border: none;
  background: transparent;

  color: var(--muted);

  font-weight: 650;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;

    padding-top: 40px;
  }

  .hero-copy-wrap {
    text-align: center;
  }

  .hero-copy {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .phone-stage {
    min-height: 610px;
  }

  .auth-layout {
    grid-template-columns: 1fr;
  }

  .auth-visual {
    display: none;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .shell {
    width: min(100% - 24px, 1160px);
  }

  .nav {
    height: 72px;
  }

  .nav .btn-secondary {
    display: none;
  }

  .hero {
    padding-top: 45px;
  }

  .hero h1 {
    font-size: 49px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .phone-stage {
    min-height: 570px;
  }

  .phone {
    transform: none;

    animation: none;
  }

  .auth-panel {
    padding:
      24px
      22px
      44px;
  }

  .dashboard-main {
    padding-top: 34px;
  }

  .dashboard-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .empty-panel {
    padding: 30px 20px;
  }
}