*{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:#051336;color:#051336;font-family:'Inter',system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:'Manrope',sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.1}
  .wrap{max-width:1240px;margin:0 auto;padding:0 40px}
  @media(max-width:640px){.wrap{padding:0 22px}}
  .grad{background:linear-gradient(90deg,#DB97ED,#7984F1);-webkit-background-clip:text;background-clip:text;color:transparent}
  :focus-visible{outline:2px solid #7282F2;outline-offset:3px;border-radius:4px}

  /* ── one section: what we're asking on the left, the form on the right ──
     The shared header is position:fixed and 70px tall, so the top padding
     carries it here instead of the source page's in-flow sticky nav. */
  .get{position:relative;overflow:hidden;background:#051336;min-height:100vh;display:flex;align-items:center;padding:134px 0 76px}
  .get::before{content:'';position:absolute;left:-10%;top:-30%;width:70%;height:130%;pointer-events:none;
    background:radial-gradient(closest-side,rgba(24,52,124,.85),rgba(5,19,54,0))}
  .get-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:64px;align-items:center;width:100%}
  @media(max-width:960px){.get{min-height:0;padding:118px 0 64px}.get-grid{grid-template-columns:1fr;gap:36px;align-items:start}}

  .get-kick{display:block;font-family:'Manrope',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:11.5px;color:#DB97ED;margin-bottom:16px}
  .get h1{font-size:clamp(32px,4.2vw,52px);color:#fff;text-wrap:balance;letter-spacing:-.035em}
  .get-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.62);margin-top:18px;max-width:46ch;text-wrap:pretty}

  .info{margin-top:38px;border-top:1px solid rgba(255,255,255,.12);max-width:44ch}
  .info li{list-style:none;display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.10)}
  .info svg{width:16px;height:16px;color:#8B9BFF;margin-top:3px}
  .info-k{display:block;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:4px}
  .info-v{font-size:14px;color:rgba(255,255,255,.88);line-height:1.5;word-break:break-word}
  .info-v a{transition:color .2s ease}
  .info-v a:hover{color:#DB97ED}
  .info-tbd{color:rgba(255,255,255,.34)}
  .info-note{margin-top:18px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.38)}

  /* the panel HubSpot drops into.
     HubSpot pads its own form ~40px inside the iframe, so the slot carries no
     horizontal padding of its own and the heading takes the same 40px — that way
     "Send us a message" and the first field label start on one vertical line. */
  .form-card{background:#fff;border-radius:20px;box-shadow:0 40px 80px -50px rgba(0,0,0,.9),0 2px 0 rgba(255,255,255,.06);overflow:hidden}
  .form-card-h{padding:24px 40px;border-bottom:1px solid #EEF0F9;background:#FCFDFF}
  .form-card-h h2{font-size:19px}
  .form-card-h p{font-size:12.5px;color:#8891B5;margin-top:6px}
  .form-slot{padding:30px 0}

  /* on a shorter laptop the whole thing still lands in one screen */
  @media(max-height:840px) and (min-width:961px){
    .get{padding:114px 0 52px}
    .get-sub{margin-top:14px}
    .info{margin-top:28px}
    .info li{padding:12px 0}
    .form-slot{padding:24px 0}
  }

  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}