@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap');

/* PartiuUP header + premium hero — 2026-09-18 */
.nav-shell {
  min-height: 92px;
  padding: 12px clamp(28px, 4.6vw, 76px);
  background: #ffffff;
  border-bottom: 1px solid rgba(11, 31, 75, .08);
  box-shadow: 0 10px 35px rgba(11, 31, 75, .07);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.dark-mode .nav-shell {
  background: #04122f;
  border-bottom-color: rgba(255, 255, 255, .10);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .22);
}

.brand-card {
  min-width: 210px;
  min-height: 62px;
  padding: 0;
  justify-content: flex-start;
  overflow: visible;
}

.nav-logo {
  width: 205px;
  height: auto;
  object-fit: contain;
}

.logo-light,
.logo-dark { mix-blend-mode: normal !important; }
.nav-right { gap: 24px; }
.nav-links { gap: 34px; }

.nav-links a {
  color: #17264a;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

body.dark-mode .nav-links a { color: rgba(255, 255, 255, .92); }
.nav-links a:hover { color: #6366f1; }

.theme-toggle {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 2px solid #f4cf24;
  background: transparent;
  color: #d7a900;
  font-size: 16px;
  box-shadow: 0 0 0 1px rgba(244, 207, 36, .08) inset;
}

body.dark-mode .theme-toggle { color: #f4cf24; }

.btn-small {
  min-height: 48px;
  padding: 12px 26px;
  position: relative;
  background: linear-gradient(90deg, #367cf7 0%, #8c55f6 52%, #ff6946 100%);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(124, 79, 235, .24);
}

.btn-small::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 1px;
  height: 38px;
  transform: translateY(-50%);
  background: rgba(23, 38, 74, .14);
}

body.dark-mode .btn-small::before { background: rgba(255, 255, 255, .16); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(760px, calc(100vh - 92px));
  padding: 64px 5% 36px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #fff;
  background:
    radial-gradient(circle at 11% 80%, rgba(38, 71, 255, .32), transparent 28%),
    radial-gradient(circle at 92% 58%, rgba(139, 56, 255, .25), transparent 29%),
    radial-gradient(circle at 100% 73%, rgba(255, 100, 48, .16), transparent 22%),
    linear-gradient(135deg, #04142f 0%, #061a43 46%, #11184f 100%) !important;
}

body.dark-mode .hero {
  background:
    radial-gradient(circle at 11% 80%, rgba(38, 71, 255, .34), transparent 28%),
    radial-gradient(circle at 92% 58%, rgba(139, 56, 255, .28), transparent 29%),
    radial-gradient(circle at 100% 73%, rgba(255, 100, 48, .18), transparent 22%),
    linear-gradient(135deg, #03122c 0%, #061940 46%, #10174c 100%) !important;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}

.hero::before {
  width: 1180px;
  height: 1180px;
  left: -700px;
  bottom: -740px;
  border: 1px solid rgba(66, 91, 255, .45);
  box-shadow:
    0 0 0 90px rgba(48, 78, 255, .055),
    0 0 0 180px rgba(49, 52, 220, .035),
    0 0 90px rgba(39, 91, 255, .42);
}

.hero::after {
  width: 920px;
  height: 920px;
  right: -560px;
  top: 30px;
  border: 1px solid rgba(130, 77, 255, .45);
  box-shadow:
    0 0 0 70px rgba(125, 61, 255, .05),
    0 0 0 142px rgba(255, 105, 55, .027),
    0 0 90px rgba(132, 57, 255, .35);
}

.hero-content.hero-premium {
  position: relative;
  z-index: 2;
  width: min(1060px, 100%);
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-main-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #fff;
}

.hero-wordmark {
  display: block;
  font-size: clamp(64px, 7vw, 102px);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.065em;
  text-shadow: 0 14px 35px rgba(0, 0, 0, .25);
}

.hero-up {
  display: inline-block;
  margin-left: .08em;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, #28a8ff 0%, #633cff 42%, #9b28ff 68%, #ff6747 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subheadline {
  display: block;
  margin-top: 8px;
  font-size: clamp(31px, 4.1vw, 56px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.035em;
  color: #e7ecff;
  text-shadow: 0 5px 24px rgba(69, 87, 255, .22);
}

.hero-message-grid {
  width: min(720px, 90%);
  margin: 28px auto 22px;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(170px, .85fr);
  gap: clamp(44px, 7vw, 86px);
  align-items: center;
}

.hero-script {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Caveat', cursive;
  font-size: clamp(48px, 5.2vw, 76px);
  line-height: .72;
  font-weight: 500;
  color: #e8edff;
  transform: rotate(-6deg);
  text-shadow: 0 0 18px rgba(81, 112, 255, .22);
}

.hero-script span:nth-child(2) { margin-left: 44px; }
.hero-script-last { margin: 5px 0 0 94px !important; }
.hero-script-last::after {
  content: "";
  display: block;
  width: 128px;
  height: 18px;
  margin: -8px 0 0 75px;
  border-bottom: 3px solid #e8edff;
  border-radius: 50%;
  transform: rotate(-5deg);
}

.hero-pillars {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 8px;
  color: #eef2ff;
  font-size: clamp(14px, 1.45vw, 20px);
  font-weight: 700;
  letter-spacing: .34em;
  line-height: 1.05;
}

.hero-pillars i {
  width: 150px;
  height: 4px;
  margin-top: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #159dff 0%, #4e45ff 38%, #a62bff 66%, #ff6845 100%);
  box-shadow: 0 0 15px rgba(94, 61, 255, .3);
}

.hero-copy {
  width: min(700px, 92%);
  margin: 5px auto 0;
  color: rgba(235, 240, 255, .74);
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.55;
  font-weight: 400;
}

.hero-actions {
  margin-top: 26px;
  display: flex !important;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero .hero-primary,
.hero .hero-secondary {
  min-height: 58px;
  padding: 16px 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hero .hero-primary {
  min-width: 285px;
  color: #fff;
  border: 0;
  background: linear-gradient(90deg, #405dff 0%, #703cff 46%, #c650c6 72%, #ff6948 100%);
  box-shadow: 0 16px 34px rgba(82, 63, 232, .28);
}

.hero .hero-secondary {
  min-width: 250px;
  color: #fff;
  border: 1px solid rgba(228, 234, 255, .65);
  background: rgba(6, 18, 47, .28);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.hero .hero-primary:hover,
.hero .hero-secondary:hover { transform: translateY(-2px); }
.hero .hero-primary:hover { box-shadow: 0 20px 38px rgba(92, 64, 235, .36); }
.hero .hero-secondary:hover { border-color: #fff; }

.hero-scroll {
  margin-top: 28px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: rgba(225, 232, 255, .65);
  text-decoration: none;
}

.hero-scroll > span {
  width: 26px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(223, 230, 255, .48);
  border-radius: 999px;
}

.hero-scroll i { font-size: 11px; }
.hero-scroll small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .30em;
}

.hero-logo-panel,
.hero > .eyebrow,
.hero .system-strip { display: none !important; }

@media (max-width: 960px) {
  .nav-shell { min-height: 82px; padding-inline: 4%; }
  .brand-card { min-width: 175px; }
  .nav-logo { width: 170px; }
  .nav-right { gap: 14px; }
  .theme-toggle { width: 44px; height: 44px; }
  .btn-small { min-height: 44px; padding: 10px 18px; }
  .btn-small::before { left: -8px; height: 32px; }

  .hero {
    min-height: max(720px, calc(100vh - 82px));
    padding: 56px 4.5% 34px;
  }

  .hero-message-grid {
    width: min(650px, 94%);
    gap: 34px;
  }

  .hero-script { font-size: clamp(45px, 7vw, 64px); }
  .hero-pillars { font-size: 15px; letter-spacing: .28em; }
}

@media (max-width: 720px) {
  .hero {
    min-height: auto;
    padding: 48px 5% 42px;
  }

  .hero-message-grid {
    margin-top: 34px;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero-script {
    font-size: clamp(48px, 13vw, 66px);
    line-height: .78;
  }

  .hero-pillars {
    align-items: center;
    font-size: 14px;
    letter-spacing: .3em;
  }

  .hero-pillars i { width: 142px; }
  .hero-actions { width: 100%; }
  .hero .hero-primary,
  .hero .hero-secondary { width: min(100%, 360px); }
  .hero-scroll { margin-top: 24px; }
}

@media (max-width: 620px) {
  .nav-shell { min-height: 72px; padding: 9px 4%; }
  .brand-card { min-width: 132px; min-height: 48px; }
  .nav-logo { width: 132px; }
  .nav-right { gap: 8px; }
  .theme-toggle { width: 38px; height: 38px; border-width: 1.5px; }
  .btn-small { min-height: 38px; padding: 8px 13px; font-size: 11px; }
  .btn-small::before { display: none; }

  .hero-wordmark { font-size: clamp(56px, 18vw, 78px); }
  .hero-subheadline { font-size: clamp(30px, 9vw, 42px); }
  .hero-copy { font-size: 15px; }
  .hero::before { width: 760px; height: 760px; left: -530px; bottom: -510px; }
  .hero::after { width: 650px; height: 650px; right: -470px; top: 70px; }
}