:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --purple: #5c25e8;
  --purple-2: #7443ef;
  --green: #18bb39;
  --green-2: #2dcc56;
  --ink: #101426;
  --body: #626b7d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #ffffff;
}

body {
  min-height: 100vh;
  color: var(--ink);
}

.topbar {
  height: 112px;
  background: #ffffff;
  border-bottom: 1px solid #e8e8ef;
  display: flex;
  align-items: center;
}

.topbar-inner {
  width: 100%;
  padding: 0 clamp(44px, 6vw, 104px);
  display: flex;
  align-items: center;
}

.brand-logo {
  display: block;
  width: clamp(290px, 30vw, 430px);
  height: auto;
  max-height: 84px;
  object-fit: contain;
  object-position: left center;
}

.hero {
  display: grid;
  grid-template-columns: minmax(570px, 1.08fr) minmax(520px, .92fr);
  min-height: calc(100vh - 162px);
  overflow: hidden;
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px clamp(46px, 6vw, 104px);
  background:
    radial-gradient(circle at 74% 26%, rgba(99, 53, 215, .07), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #fcfbff 60%, #f7f4ff 100%);
}

.hero-copy::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: -82px;
  width: 170px;
  height: 100%;
  background: linear-gradient(135deg, #f8f6ff, #fbfaff);
  transform: skewX(-5.5deg);
  transform-origin: bottom;
}

.eyebrow {
  margin-bottom: 28px;
  color: var(--purple);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .17em;
}

h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(64px, 5.7vw, 94px);
  line-height: 1.04;
  letter-spacing: -.055em;
  font-weight: 780;
}

.ai-word {
  background: linear-gradient(105deg, #7045df 15%, #1fbd41 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  max-width: 690px;
  margin: 30px 0 38px;
  color: var(--body);
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.72;
}

.signin {
  width: fit-content;
  min-width: 350px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 17px 20px;
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: 750;
  background: linear-gradient(105deg, #5c22e9 0%, #7341ef 42%, #19c745 100%);
  box-shadow: 0 16px 38px rgba(92, 34, 233, .23);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.signin:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 20px 46px rgba(92, 34, 233, .30);
}

.lock, .secure-icon {
  display: grid;
  place-items: center;
}

.lock svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
}

.arrow {
  font-size: 28px;
  line-height: 1;
}

.secure-note {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #60697a;
  font-size: 14px;
}

.secure-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: url(#secureGradient);
  stroke: #5d35de;
  stroke-width: 1.7;
}

.hero-media {
  position: relative;
  overflow: hidden;
  background: #08051b;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

.hero-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 720px;
  object-fit: cover;
  object-position: 50% 50%;
}

.footer {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 clamp(44px, 6vw, 104px);
  border-top: 1px solid #e9e9ef;
  color: #8a90a0;
  background: #ffffff;
  font-size: 11px;
}

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

  .hero-copy {
    padding-left: 44px;
    padding-right: 44px;
  }

  h1 {
    font-size: clamp(55px, 6vw, 76px);
  }

  .brand-logo {
    width: 310px;
  }
}

@media (max-width: 850px) {
  .topbar {
    height: 92px;
  }

  .topbar-inner {
    padding: 0 24px;
  }

  .brand-logo {
    width: 250px;
    max-height: 68px;
  }

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

  .hero-copy {
    padding: 54px 24px 48px;
  }

  .hero-copy::after {
    display: none;
  }

  h1 {
    font-size: clamp(50px, 13vw, 70px);
  }

  .lead {
    font-size: 18px;
  }

  .signin {
    min-width: 0;
    width: min(100%, 390px);
  }

  .hero-media {
    clip-path: none;
    min-height: 520px;
  }

  .hero-image {
    min-height: 520px;
    object-position: 50% 46%;
  }

  .footer {
    padding: 15px 24px;
    flex-wrap: wrap;
  }
}

@media (max-width: 500px) {
  .brand-logo {
    width: 220px;
  }

  .hero-copy {
    padding: 44px 20px;
  }

  h1 {
    font-size: clamp(46px, 13vw, 59px);
  }

  .signin {
    width: 100%;
  }

  .hero-media, .hero-image {
    min-height: 420px;
  }
}

/* =========================================================
   APPROVED DESKTOP COMPOSITION - COMPACT VIEWPORT BALANCE
   ========================================================= */

@media (min-width: 851px) {

  .topbar {
    height: 96px;
  }

  .topbar-inner {
    padding-left: clamp(44px, 5.5vw, 92px);
    padding-right: clamp(44px, 5.5vw, 92px);
  }

  .brand-logo {
    width: clamp(275px, 24vw, 365px);
    max-height: 72px;
  }

  .hero {
    min-height: 650px;
    height: calc(100vh - 146px);
    max-height: 820px;

    grid-template-columns:
      minmax(560px, 1.12fr)
      minmax(480px, .88fr);
  }

  .hero-copy {
    padding-top: clamp(48px, 6vh, 72px);
    padding-bottom: clamp(48px, 6vh, 72px);
    padding-left: clamp(46px, 5.5vw, 94px);
    padding-right: clamp(50px, 6vw, 105px);
  }

  .eyebrow {
    margin-bottom: 20px;
  }

  h1 {
    font-size: clamp(58px, 5vw, 82px);
    line-height: 1.02;
  }

  .lead {
    margin-top: 24px;
    margin-bottom: 30px;
    max-width: 640px;
  }

  .signin {
    min-width: 330px;
  }

  .secure-note {
    margin-top: 14px;
  }

  .hero-media {
    display: grid;
    place-items: center;

    min-height: 0;

    padding:
      clamp(28px, 4vh, 48px)
      clamp(30px, 4vw, 58px);

    background:
      radial-gradient(
        circle at 70% 20%,
        rgba(104, 47, 230, .28),
        transparent 35%
      ),
      radial-gradient(
        circle at 24% 82%,
        rgba(25, 190, 63, .15),
        transparent 32%
      ),
      #08051b;
  }

  .hero-image {
    width: auto;
    height: auto;

    max-width: 88%;
    max-height: min(690px, calc(100vh - 205px));

    min-height: 0;

    object-fit: contain;
    object-position: center;

    border-radius: 2px;

    box-shadow:
      0 28px 70px rgba(0, 0, 0, .28);
  }

  .footer {
    min-height: 50px;
  }
}

/* =========================================================
   FINAL DESKTOP COMPACTING
   ========================================================= */

@media (min-width: 851px) {

  .topbar {
    height: 88px;
  }

  .brand-logo {
    width: clamp(265px, 22vw, 340px);
    max-height: 66px;
  }

  .hero {
    min-height: 610px;
    height: calc(100vh - 138px);
    max-height: 750px;
  }

  .hero-copy {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .eyebrow {
    margin-bottom: 16px;
  }

  h1 {
    font-size: clamp(56px, 4.8vw, 78px);
  }

  .lead {
    margin-top: 20px;
    margin-bottom: 26px;
  }

  .secure-note {
    margin-top: 12px;
  }

  .hero-media {
    padding:
      20px
      clamp(26px, 3vw, 42px);

    overflow: hidden;
  }

  .hero-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 84%;
    max-height: min(620px, calc(100vh - 185px));

    min-height: 0;

    object-fit: contain;
    object-position: center;

    /* Hide the thin white source-image edge */
    clip-path: inset(0 4px 0 0);

    transform: scale(1.006);
  }
}