:root {
  --white: #ffffff;
  --ink: #071326;
  --ink-soft: #304158;
  --muted: #71819a;
  --line: rgba(35, 62, 95, 0.12);
  --line-strong: rgba(35, 62, 95, 0.2);
  --blue: #2f79ff;
  --cyan: #18c7d9;
  --cyan-soft: rgba(24, 199, 217, 0.16);
  --blue-soft: rgba(47, 121, 255, 0.14);
  --shadow-soft: 0 22px 70px rgba(20, 48, 86, 0.12);
  --shadow-card: 0 28px 90px rgba(17, 50, 94, 0.14);
  --radius-xl: 36px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --container: 1140px;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #fff;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 13%, rgba(47, 121, 255, 0.08), transparent 20rem),
    radial-gradient(circle at 83% 22%, rgba(24, 199, 217, 0.08), transparent 19rem),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 56%, #f6fbff 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -5;
  background:
    linear-gradient(90deg, rgba(23, 48, 84, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(23, 48, 84, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 35%, rgba(0,0,0,.65), transparent 72%);
}

.page-shell {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
}

.motion-field {
  position: absolute;
  width: 58rem;
  height: 58rem;
  border-radius: 50%;
  filter: blur(22px);
  opacity: .55;
  transform-origin: center;
  animation: rotateDrift 28s linear infinite;
}

.motion-field::before,
.motion-field::after {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 1px dashed rgba(47, 121, 255, .22);
}

.motion-field::after {
  inset: 28%;
  border-color: rgba(24, 199, 217, .18);
  border-style: solid;
}

.motion-field-one { top: -30rem; left: -24rem; }
.motion-field-two { right: -30rem; bottom: -32rem; animation-duration: 36s; animation-direction: reverse; }

.soft-grid {
  position: absolute;
  inset: auto -8rem -4rem -8rem;
  height: 42vh;
  opacity: .45;
  background-image:
    repeating-linear-gradient(8deg, transparent 0 18px, rgba(47,121,255,.08) 18px 19px),
    repeating-linear-gradient(-8deg, transparent 0 22px, rgba(24,199,217,.06) 22px 23px);
  mask-image: linear-gradient(to top, rgba(0,0,0,.7), transparent 82%);
  animation: gridGlide 18s ease-in-out infinite alternate;
}

.wave {
  position: absolute;
  left: -12%;
  right: -12%;
  height: 24rem;
  opacity: .28;
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 14px, rgba(47, 121, 255, .17) 15px 16px, transparent 17px 30px);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  transform: rotate(-6deg);
}

.wave-one { bottom: 2rem; animation: waveFloat 14s ease-in-out infinite alternate; }
.wave-two { top: 8rem; opacity: .14; animation: waveFloat 20s ease-in-out infinite alternate-reverse; }

.orb {
  position: absolute;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(148, 216, 255, .7) 24%, rgba(47, 121, 255, .24) 52%, rgba(47, 121, 255, 0) 72%);
  box-shadow: inset 10px 16px 28px rgba(255,255,255,.7), 0 22px 54px rgba(47, 121, 255, .15);
  animation: orbFloat 9s ease-in-out infinite;
}

.orb-one { width: 5rem; height: 5rem; top: 7%; left: 11%; animation-delay: -1s; }
.orb-two { width: 3.1rem; height: 3.1rem; top: 13%; right: 18%; animation-duration: 11s; animation-delay: -4s; }
.orb-three { width: 9rem; height: 9rem; right: 8%; bottom: 7%; filter: blur(.5px); animation-duration: 13s; animation-delay: -2s; }
.orb-four { width: 2.35rem; height: 2.35rem; left: 6%; bottom: 17%; animation-duration: 10s; animation-delay: -6s; }

.micro-dots {
  position: absolute;
  width: 18rem;
  height: 18rem;
  left: 4%;
  bottom: 4%;
  opacity: .32;
  background-image: radial-gradient(circle, rgba(47,121,255,.25) 1.4px, transparent 1.5px);
  background-size: 18px 18px;
  mask-image: radial-gradient(circle, #000 0 45%, transparent 73%);
  animation: dotsBreathe 8s ease-in-out infinite;
}

.hex-frame {
  position: absolute;
  width: 15rem;
  aspect-ratio: 1;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  background: linear-gradient(135deg, rgba(47,121,255,.08), rgba(24,199,217,.05));
  border: 1px solid rgba(47, 121, 255, .12);
  animation: hexDrift 14s ease-in-out infinite;
}

.hex-frame span {
  position: absolute;
  inset: 1.1rem;
  clip-path: inherit;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 0 38px rgba(47,121,255,.1);
}

.hex-frame-one { top: 21%; right: 7%; opacity: .55; }
.hex-frame-two { width: 8rem; bottom: 13%; left: 12%; opacity: .28; animation-duration: 18s; animation-direction: reverse; }

.floating-cube {
  position: absolute;
  width: 3.7rem;
  height: 3.7rem;
  background: linear-gradient(135deg, rgba(47,121,255,.9), rgba(24,199,217,.72));
  clip-path: polygon(50% 0, 92% 25%, 92% 75%, 50% 100%, 8% 75%, 8% 25%);
  box-shadow: 0 24px 48px rgba(47,121,255,.2);
  animation: cubeFloat 10s ease-in-out infinite;
}

.cube-one { right: 12%; top: 29%; opacity: .65; }
.cube-two { left: 28%; top: 47%; width: 1.2rem; height: 1.2rem; opacity: .5; animation-delay: -5s; }

.hero {
  min-height: calc(100vh - 54px);
  display: grid;
  place-items: center;
  padding: 5.5rem 1.25rem 2.25rem;
}

.hero-card {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: clamp(2rem, 4.6vw, 4.6rem);
  text-align: center;
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.82);
  background:
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.56)),
    radial-gradient(circle at 50% 0%, rgba(47,121,255,.07), transparent 30rem);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
  animation: cardEntrance 1s cubic-bezier(.2,.8,.2,1) both;
}

.hero-card::before,
.hero-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
}

.hero-card::before {
  inset: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.32));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.hero-card::after {
  inset: -1px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(47,121,255,.26), rgba(24,199,217,.1), rgba(255,255,255,.75));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.brand-lockup {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.15rem;
}

.logo {
  width: min(29rem, 76vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 26px rgba(21, 56, 99, .08));
}

.status-pill {
  width: fit-content;
  margin: 0 auto 1.35rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .58rem .9rem;
  border: 1px solid rgba(47,121,255,.16);
  border-radius: 999px;
  color: #315173;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 36px rgba(47,121,255,.07);
}

.status-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 0 0 6px rgba(24,199,217,.11), 0 0 22px rgba(24,199,217,.45);
  animation: dotPulse 2.1s ease-in-out infinite;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(3.9rem, 10.4vw, 8.8rem);
  line-height: .88;
  letter-spacing: -.075em;
  font-weight: 800;
}

h1 span {
  display: inline-block;
  margin-left: .12em;
  background: linear-gradient(110deg, #2d6fff 0%, #20bde0 62%, #11cfc0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 14px 30px rgba(47,121,255,.1));
}

.title-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: min(18rem, 55vw);
  margin: 2rem auto 1.55rem;
  color: var(--blue);
}

.title-divider::before,
.title-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,121,255,.28));
}

.title-divider::after {
  background: linear-gradient(90deg, rgba(24,199,217,.28), transparent);
}

.title-divider i {
  width: .9rem;
  height: .9rem;
  display: block;
  border: 2px solid currentColor;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  animation: tinySpin 9s linear infinite;
}

.hero-copy {
  max-width: 690px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(1.03rem, 1.7vw, 1.28rem);
  line-height: 1.75;
  letter-spacing: .01em;
}

.hero-copy strong {
  display: block;
  font-weight: 500;
  color: #536985;
}

.notify-panel {
  width: min(100%, 660px);
  margin: 2.2rem auto 2.15rem;
  padding: .7rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .7rem;
  border: 1px solid rgba(40, 73, 111, .11);
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
}

.input-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 0 1rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(249,252,255,.94), rgba(255,255,255,.72));
}

.input-wrap svg {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  stroke: #235d9f;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  padding: 1.15rem 0;
}

input::placeholder { color: #8a98aa; }

button {
  border: 0;
  outline: 0;
  min-width: 12.6rem;
  padding: 1.15rem 1.6rem;
  border-radius: 18px;
  font: inherit;
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
  background: linear-gradient(135deg, #326fff 0%, #20bde0 65%, #13cfc4 100%);
  box-shadow: 0 18px 40px rgba(47,121,255,.22), inset 0 1px 0 rgba(255,255,255,.25);
}

.trust-row {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  color: #405573;
}

.trust-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1rem;
  font-size: .96rem;
  font-weight: 600;
  border-right: 1px solid var(--line);
}

.trust-item:last-child { border-right: 0; }

.trust-item svg {
  width: 1.7rem;
  height: 1.7rem;
  stroke: #315a91;
  fill: none;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.site-footer {
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 0 1rem 1.4rem;
  color: #77869a;
  font-size: .92rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rotateDrift {
  from { transform: rotate(0deg) translate3d(0,0,0); }
  to { transform: rotate(360deg) translate3d(0,0,0); }
}

@keyframes gridGlide {
  from { transform: translateX(-2rem) translateY(1rem) rotate(-2deg); }
  to { transform: translateX(2rem) translateY(-1rem) rotate(2deg); }
}

@keyframes waveFloat {
  from { transform: translateX(-3rem) translateY(1rem) rotate(-6deg); }
  to { transform: translateX(3rem) translateY(-1.2rem) rotate(-4deg); }
}

@keyframes orbFloat {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  35% { transform: translate3d(1.15rem,-1.6rem,0) scale(1.05); }
  70% { transform: translate3d(-1.4rem,.9rem,0) scale(.96); }
}

@keyframes dotsBreathe {
  0%, 100% { opacity: .23; transform: scale(.98); }
  50% { opacity: .42; transform: scale(1.04); }
}

@keyframes hexDrift {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(.9rem,-1.1rem,0) rotate(4deg); }
}

@keyframes cubeFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1.4rem) rotate(10deg); }
}

@keyframes dotPulse {
  0%, 100% { transform: scale(.94); opacity: .74; }
  50% { transform: scale(1.12); opacity: 1; }
}

@keyframes tinySpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 760px) {
  .hero { padding-top: 2.5rem; }

  .hero-card {
    border-radius: 28px;
    padding: 2rem 1.15rem;
  }

  .logo { width: min(24rem, 82vw); }

  h1 {
    display: grid;
    gap: .14em;
    font-size: clamp(4.1rem, 18vw, 6.2rem);
    letter-spacing: -.07em;
  }

  h1 span { margin-left: 0; }

  .notify-panel {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .input-wrap { min-height: 4rem; }

  button { width: 100%; min-width: 0; }

  .trust-row {
    grid-template-columns: 1fr;
    gap: .2rem;
  }

  .trust-item {
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .orb-three { width: 6rem; height: 6rem; }
  .hex-frame-one { right: -4rem; opacity: .22; }
}

@media (max-width: 440px) {
  .hero-card { padding: 1.6rem .9rem; }
  .brand-lockup { margin-bottom: 1.45rem; }
  .status-pill { font-size: .7rem; }
  .hero-copy { font-size: .98rem; }
  .notify-panel { margin-top: 1.6rem; }
}

/* Notify form messages + spam honeypot */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-message {
  min-height: 1.3rem;
  margin: -1.2rem auto 1.65rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.form-message.is-success { color: #168a6b; }
.form-message.is-error { color: #b42318; }

/* Animated pharmaceutical molecule background */
.molecule {
  position: absolute;
  width: 14rem;
  height: 14rem;
  opacity: .48;
  filter: drop-shadow(0 18px 36px rgba(47, 121, 255, .08));
  animation: moleculeDrift 18s ease-in-out infinite;
}

.atom {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, rgba(92, 187, 255, .82) 38%, rgba(47, 121, 255, .42) 72%);
  box-shadow: 0 0 0 8px rgba(47, 121, 255, .045), 0 12px 24px rgba(47, 121, 255, .13);
}

.atom-a { width: 1.35rem; height: 1.35rem; left: 48%; top: 46%; }
.atom-b { left: 14%; top: 28%; }
.atom-c { right: 12%; top: 22%; }
.atom-d { left: 28%; bottom: 16%; }
.atom-e { right: 22%; bottom: 13%; }

.bond {
  position: absolute;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(47, 121, 255, .32), rgba(24, 199, 217, .18), transparent);
}

.bond-ab { width: 5.35rem; left: 20%; top: 34%; transform: rotate(24deg); }
.bond-ac { width: 5.4rem; left: 53%; top: 48%; transform: rotate(-38deg); }
.bond-ad { width: 4.9rem; left: 35%; top: 57%; transform: rotate(126deg); }
.bond-ae { width: 4.2rem; left: 55%; top: 57%; transform: rotate(48deg); }

.molecule-one { top: 12%; left: 3%; animation-delay: -3s; }
.molecule-two { right: 5%; top: 14%; width: 17rem; height: 17rem; opacity: .38; animation-duration: 22s; animation-delay: -8s; }
.molecule-three { left: 72%; bottom: 8%; width: 10rem; height: 10rem; opacity: .30; animation-duration: 15s; animation-direction: reverse; }

@keyframes moleculeDrift {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  33% { transform: translate3d(1.6rem,-1.15rem,0) rotate(5deg) scale(1.03); }
  66% { transform: translate3d(-1.1rem,.9rem,0) rotate(-4deg) scale(.98); }
}


/* More visible pharma/science background graphics */
.science-graphic {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  opacity: .5;
  filter: drop-shadow(0 16px 42px rgba(47, 121, 255, .10));
}

.science-graphic line,
.science-graphic path,
.science-graphic polygon {
  fill: none;
  stroke: rgba(46, 118, 255, .38);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.science-graphic circle {
  fill: rgba(255,255,255,.96);
  stroke: rgba(46, 118, 255, .55);
  stroke-width: 3;
}

.molecule-svg {
  animation: scienceFloat 16s ease-in-out infinite;
}

.molecule-svg .molecule-group {
  animation: scienceSpin 26s linear infinite;
  transform-origin: 50% 50%;
}

.mol-svg-one {
  width: 19rem;
  height: 19rem;
  left: 3.5%;
  top: 6%;
}

.mol-svg-two {
  width: 18rem;
  height: 18rem;
  right: 5%;
  bottom: 7%;
  opacity: .42;
  animation-duration: 20s;
  animation-direction: reverse;
}

.dna-svg {
  width: 11rem;
  height: 24rem;
  right: 8%;
  top: 11%;
  opacity: .28;
  animation: dnaDrift 18s ease-in-out infinite;
}

.dna-svg line {
  stroke: rgba(24, 199, 217, .26);
  stroke-width: 2.5;
}

.dna-svg .strand {
  stroke-width: 4;
}

.pill-shape {
  position: absolute;
  width: 7rem;
  height: 2.7rem;
  border-radius: 999px;
  border: 1px solid rgba(47,121,255,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(225,242,255,.82));
  box-shadow: 0 16px 38px rgba(47,121,255,.10), inset 0 0 0 1px rgba(255,255,255,.6);
  opacity: .5;
  animation: pillFloat 14s ease-in-out infinite;
}

.pill-shape::before,
.pill-shape::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border-radius: inherit;
}

.pill-shape::before {
  left: 0;
  background: linear-gradient(135deg, rgba(47,121,255,.14), rgba(47,121,255,.05));
}

.pill-shape::after {
  right: 0;
  background: linear-gradient(135deg, rgba(24,199,217,.18), rgba(24,199,217,.05));
}

.pill-one {
  left: 10%;
  bottom: 14%;
  transform: rotate(-22deg);
}

.pill-two {
  right: 18%;
  top: 20%;
  width: 5.8rem;
  height: 2.2rem;
  opacity: .34;
  transform: rotate(34deg);
  animation-duration: 17s;
}

@keyframes scienceFloat {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-12px,0); }
}

@keyframes scienceSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dnaDrift {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(6px,-14px,0) rotate(3deg); }
}

@keyframes pillFloat {
  0%, 100% { transform: translateY(0) rotate(-22deg); }
  50% { transform: translateY(-10px) rotate(-16deg); }
}

.pill-two {
  animation-name: pillFloatTwo;
}

@keyframes pillFloatTwo {
  0%, 100% { transform: translateY(0) rotate(34deg); }
  50% { transform: translateY(-12px) rotate(28deg); }
}

/* Success popup / toast */
.success-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 50;
  width: min(calc(100% - 2rem), 460px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .95rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(22, 138, 107, .18);
  border-radius: 22px;
  background: rgba(255, 255, 255, .92);
  color: #12342c;
  box-shadow: 0 24px 70px rgba(17, 50, 94, .16), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  transform: translate(-50%, 1.2rem) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}

.success-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.toast-icon {
  width: 2.65rem;
  height: 2.65rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(22, 138, 107, .14), rgba(24, 199, 217, .14));
  box-shadow: 0 0 0 8px rgba(22, 138, 107, .045);
}

.toast-icon svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: #168a6b;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.success-toast strong,
.success-toast span {
  display: block;
}

.success-toast strong {
  font-size: .98rem;
  font-weight: 800;
  margin-bottom: .14rem;
}

.success-toast span {
  color: #4e6a62;
  font-size: .9rem;
  line-height: 1.35;
}

button:disabled {
  cursor: wait;
  opacity: .74;
}

@media (max-width: 760px) {
  .molecule-one { left: -4rem; top: 7%; }
  .molecule-two { right: -6rem; top: 19%; }
  .molecule-three { display: none; }
  .success-toast { bottom: 1rem; }
}


@media (max-width: 760px) {
  .mol-svg-one { left: -4rem; top: 4%; width: 15rem; height: 15rem; opacity: .34; }
  .mol-svg-two { right: -4rem; bottom: 8%; width: 14rem; height: 14rem; opacity: .28; }
  .dna-svg { right: -2rem; top: 14%; width: 8rem; height: 18rem; opacity: .18; }
  .pill-one { left: -1rem; bottom: 12%; }
  .pill-two { right: 6%; top: 10%; }
}


/* Visible but professional pharma motion inside the main white card */
.hero-card > *:not(.card-science-layer) {
  position: relative;
  z-index: 2;
}

.card-science-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.card-science-layer::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 15% 22%, rgba(47, 121, 255, .085), transparent 16rem),
    radial-gradient(circle at 86% 38%, rgba(24, 199, 217, .075), transparent 15rem),
    radial-gradient(circle at 50% 90%, rgba(47, 121, 255, .055), transparent 18rem);
  filter: blur(3px);
  animation: pharmaGlowMove 12s ease-in-out infinite alternate;
}

.card-molecule,
.card-dna {
  position: absolute;
  overflow: visible;
  opacity: .22;
  filter: drop-shadow(0 14px 34px rgba(47, 121, 255, .10));
}

.card-molecule g {
  transform-origin: 50% 50%;
  animation: pharmaRotate 42s linear infinite;
}

.card-molecule line,
.card-molecule polygon,
.card-dna path,
.card-dna line {
  fill: none;
  stroke: rgba(32, 96, 180, .48);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-molecule circle {
  fill: rgba(255, 255, 255, .96);
  stroke: rgba(34, 120, 220, .58);
  stroke-width: 2.6;
}

.card-molecule-left {
  width: 28rem;
  height: 22rem;
  left: -8rem;
  top: 15%;
  animation: pharmaFloatLeft 14s ease-in-out infinite;
}

.card-molecule-right {
  width: 27rem;
  height: 23rem;
  right: -8rem;
  top: 25%;
  opacity: .18;
  animation: pharmaFloatRight 16s ease-in-out infinite;
}

.card-molecule-right g {
  animation-duration: 52s;
  animation-direction: reverse;
}

.card-dna {
  width: 8rem;
  height: 20rem;
  right: 3.5rem;
  top: 5%;
  opacity: .14;
  animation: dnaVisibleFloat 15s ease-in-out infinite;
}

.card-dna path {
  stroke-width: 3;
  stroke: rgba(24, 136, 190, .42);
}

.card-dna line {
  stroke: rgba(47, 121, 255, .30);
  stroke-width: 2;
}

.card-capsule {
  position: absolute;
  width: 6.8rem;
  height: 2.45rem;
  border-radius: 999px;
  border: 1px solid rgba(47, 121, 255, .16);
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(230,246,255,.84));
  box-shadow: 0 16px 38px rgba(47, 121, 255, .09), inset 0 0 0 1px rgba(255,255,255,.72);
  opacity: .28;
  animation: capsuleDrift 13s ease-in-out infinite;
}

.card-capsule::before,
.card-capsule::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border-radius: inherit;
}

.card-capsule::before {
  left: 0;
  background: rgba(47, 121, 255, .12);
}

.card-capsule::after {
  right: 0;
  background: rgba(24, 199, 217, .13);
}

.card-capsule-one {
  left: 7%;
  bottom: 14%;
  transform: rotate(-18deg);
}

.card-capsule-two {
  right: 16%;
  bottom: 10%;
  width: 5.6rem;
  height: 2.1rem;
  opacity: .18;
  transform: rotate(24deg);
  animation-name: capsuleDriftTwo;
  animation-duration: 16s;
}

@keyframes pharmaGlowMove {
  from { transform: translate3d(-8px, 4px, 0) scale(1); opacity: .8; }
  to { transform: translate3d(10px, -8px, 0) scale(1.04); opacity: 1; }
}

@keyframes pharmaRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pharmaFloatLeft {
  0%, 100% { transform: translate3d(0,0,0) rotate(-4deg); }
  50% { transform: translate3d(16px,-12px,0) rotate(1deg); }
}

@keyframes pharmaFloatRight {
  0%, 100% { transform: translate3d(0,0,0) rotate(5deg); }
  50% { transform: translate3d(-14px,10px,0) rotate(0deg); }
}

@keyframes dnaVisibleFloat {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(8px,14px,0) rotate(2deg); }
}

@keyframes capsuleDrift {
  0%, 100% { transform: translateY(0) rotate(-18deg); }
  50% { transform: translateY(-12px) rotate(-13deg); }
}

@keyframes capsuleDriftTwo {
  0%, 100% { transform: translateY(0) rotate(24deg); }
  50% { transform: translateY(-10px) rotate(18deg); }
}

@media (max-width: 760px) {
  .card-molecule-left {
    width: 20rem;
    height: 16rem;
    left: -8rem;
    top: 18%;
    opacity: .16;
  }

  .card-molecule-right {
    width: 20rem;
    height: 17rem;
    right: -9rem;
    top: 34%;
    opacity: .13;
  }

  .card-dna {
    display: none;
  }

  .card-capsule-one {
    left: -2rem;
    bottom: 16%;
  }

  .card-capsule-two {
    right: -1.5rem;
    bottom: 8%;
  }
}