:root { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; color-scheme: dark; color: #e7e9ea; background: #000; --blue: #1d9bf0; --scale: 1; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; overflow-x: hidden; }
.world { position: fixed; inset: 0; overflow: hidden; z-index: -1; background: #000; }
.desktop-stage { position: absolute; width: 1400px; height: 866px; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--scale)); }
.x-desktop { display: block; width: 1400px; height: 866px; filter: invert(1) hue-rotate(180deg) blur(7px); opacity: .82; }
.soft-wash { position: absolute; inset: 0; background: linear-gradient(180deg, #00000008 0%, #00000008 30%, #000000a8 62%, #000000e6 100%); }
.notification-focus { position: absolute; left: calc(50% - 660px * var(--scale)); top: calc(50svh - 252px * var(--scale)); width: 33px; height: 36px; display: grid; place-items: center; background: #000; border-radius: 50%; box-shadow: 0 0 18px 18px #000; transform: scale(var(--scale)); transform-origin: top left; }
.notification-focus svg { width: 27px; height: 27px; fill: #e7e9ea; }
.badge { position: absolute; top: -5px; right: -12px; border: 2px solid #000; border-radius: 15px; background: var(--blue); color: white; font-size: 12px; line-height: 17px; min-width: 31px; text-align: center; padding: 0 3px; }
.opportunity { position: absolute; left: calc(50% - 383px * var(--scale)); top: calc(50svh - 137px * var(--scale)); width: calc(646px * var(--scale)); min-height: 158px; display: flex; gap: 12px; padding: 17px 18px; background: #000; border-top: 1px solid #2f3336; border-bottom: 1px solid #2f3336; box-shadow: 0 0 18px 10px #000000df; }
.avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.post-content { min-width: 0; flex: 1; }
.post-byline { display: flex; gap: 5px; align-items: baseline; font-size: 14px; white-space: nowrap; line-height: 22px; }
.post-byline strong { font-weight: 700; }
.post-byline span { color: #8b98a5; }
.post-more { margin-left: auto; font-size: 19px; line-height: 10px; font-weight: 700; }
.post-text { margin: 5px 0 17px; font: 400 17px/1.45 Arial, sans-serif; }
.post-text span { display: block; white-space: nowrap; }
.post-stats { display: flex; justify-content: space-between; color: #8b98a5; font-size: 12px; max-width: 100%; }
.post-stats span { display: flex; align-items: center; gap: 7px; }
.post-stats svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero { position: absolute; left: 50%; top: max(465px, calc(50svh + 34px)); transform: translateX(-50%); width: min(740px, calc(100% - 48px)); text-align: center; padding-bottom: 44px; }
h1 { font-size: clamp(36px, 4.05vw, 58px); font-weight: 650; line-height: 1.07; letter-spacing: -.055em; margin: 0; }
.subtitle { margin: 19px 0 27px; font-size: 19px; letter-spacing: -.025em; color: #8b98a5; }
form { margin: 0 auto; display: flex; gap: 8px; width: min(440px, 100%); }
input { min-width: 0; flex: 1; border: 1px solid #536471; border-radius: 999px; padding: 14px 19px; color: #e7e9ea; background: #0b0d0fed; font: inherit; font-size: 15px; }
input::placeholder { color: #8b98a5; }
button { border: none; border-radius: 999px; background: #eff3f4; color: #0f1419; padding: 14px 22px; min-height: 48px; font: 600 14px Inter, Arial, sans-serif; cursor: pointer; transition: background .2s; white-space: nowrap; }
button:hover { background: #d7dbdc; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid #1d9bf080; outline-offset: 4px; }
.proof { margin: 20px 0 0; font-size: 14px; line-height: 1.5; color: #8b98a5; }
.form-status { font-size: 14px; color: #c4cbd1; line-height: 1.5; }
.form-status:empty { display: none; }
.dm { position: fixed; right: 24px; bottom: 22px; width: 340px; background: #000; border: 1px solid #2f3336; border-radius: 16px; box-shadow: 0 6px 34px #00000066, 0 0 22px 12px #000000b8; }
.dm-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 10px; font-size: 15px; font-weight: 700; border-bottom: 1px solid #2f3336; }
.dm-time { font-size: 12px; font-weight: 400; color: #8b98a5; }
.dm-body { display: flex; gap: 10px; padding: 14px 15px 17px; position: relative; }
.dm-body .avatar { width: 38px; height: 38px; }
.friend-name { font-size: 14px; font-weight: 700; }
.friend-name span { font-size: 12px; font-weight: 400; color: #8b98a5; margin-left: 3px; }
.dm-body p { font: 400 14px/1.45 Arial, sans-serif; margin: 6px 8px 0 0; }
.unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); position: absolute; top: 19px; right: 13px; }
.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; }
@media (max-width: 1190px) and (min-width: 701px) {
  .dm { width: 292px; right: 18px; bottom: 18px; }
  .hero { width: 660px; left: 43%; }
  h1 { font-size: 46px; }
}
@media (max-height: 800px) and (min-width: 701px) {
  .hero { top: max(390px, calc(50svh + 25px)); }
  h1 { font-size: 46px; }
  .subtitle { margin: 15px 0 22px; }
}
@media (max-width: 700px) {
  body { min-height: 880px; }
  .desktop-stage { top: 430px; }
  .x-desktop { opacity: .7; filter: invert(1) hue-rotate(180deg) blur(7px); }
  .soft-wash { background: linear-gradient(180deg, #00000020, #000000de 65%); }
  .notification-focus { left: 26px; top: 63px; transform: none; }
  .opportunity { left: 16px; top: 147px; width: calc(100% - 32px); padding: 15px 12px; gap: 9px; min-height: 143px; }
  .opportunity .avatar { width: 32px; height: 32px; }
  .post-byline { font-size: 12px; gap: 4px; }
  .post-text { font-size: clamp(12px, 3.6vw, 17px); line-height: 1.6; margin: 5px 0 14px; }
  .post-stats { font-size: 11px; }
  .post-stats svg { width: 15px; height: 15px; }
  .hero { top: 345px; left: 50%; width: calc(100% - 36px); }
  h1 { font-size: clamp(33px, 8.8vw, 54px); letter-spacing: -.055em; }
  .subtitle { font-size: 16px; margin: 20px 0 25px; }
  form { gap: 7px; }
  input { font-size: 16px; padding: 13px 15px; width: 0; }
  button { padding: 13px 16px; }
  .proof { font-size: 13px; }
  .dm { position: absolute; top: 708px; bottom: auto; right: 18px; width: min(340px, calc(100% - 36px)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Quieter desktop UI scale; typography follows Kurqan's Dune treatment. */
.hero { top: calc(50svh + 90px); left: 50%; width: min(860px, calc(100% - 48px)); }
h1 { font-family: Gruppo, Arial, sans-serif; font-size: clamp(42px, 4.3vw, 64px); font-weight: 400; line-height: 1.12; letter-spacing: .035em; color: #f3eee4; text-shadow: 0 2px 24px #0009; }
.subtitle { font-size: 17px; font-weight: 400; letter-spacing: .015em; margin: 22px 0 28px; color: #a7adb4; }
.opportunity { min-height: 148px; border-color: #ffffff12; box-shadow: 0 0 20px 12px #000d; }
.post-text { font-size: 16px; }
form { width: min(438px, 100%); gap: 10px; }
input { border-color: #ffffff29; background: #0c0e11e8; transition: border-color .2s, background .2s; }
input:hover { border-color: #ffffff48; }
input:focus { border-color: #9fa9b5; background: #11151a; }
button { background: #eee9de; font-weight: 600; box-shadow: 0 2px 12px #0003; }
button:hover { background: #fff9ed; }
.proof { margin-top: 18px; color: #858e98; font-size: 13px; }
.dm { width: 304px; right: 26px; bottom: 24px; border-radius: 12px; border-color: #ffffff20; background: #080a0c; box-shadow: 0 8px 36px #0009; }
.dm-header { padding: 11px 14px 9px; font-size: 14px; border-color: #ffffff10; }
.dm-body { padding: 13px 14px 15px; }
.dm-body p { line-height: 1.5; color: #d5dade; }
@media (max-height: 800px) and (min-width: 701px) {
  .hero { top: calc(50svh + 78px); }
  h1 { font-size: clamp(40px, 4vw, 56px); }
  .subtitle { margin: 18px 0 23px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .dm { position: absolute; top: calc(50svh + 380px); bottom: auto; right: 24px; }
  body { min-height: calc(50svh + 565px); }
}
@media (max-width: 700px) {
  .hero { top: 342px; width: calc(100% - 36px); }
  h1 { font-size: clamp(29px, 7.5vw, 48px); line-height: 1.2; letter-spacing: .015em; }
  .subtitle { font-size: 16px; margin: 22px 0 26px; letter-spacing: 0; }
  .post-text { font-size: clamp(12px, 3.6vw, 17px); }
  .notification-focus { transform: scale(.85); }
  .proof { max-width: 290px; margin: 18px auto 0; line-height: 1.6; }
  .dm { top: 675px; right: 18px; width: min(304px, calc(100% - 36px)); }
  form { gap: 8px; }
}

/* Focus-card proportions. */
@media (min-width: 701px) {
  .opportunity { width: min(490px, calc(646px * var(--scale))); }
}
.dm { transform: scale(1.15); transform-origin: bottom right; }
@media (min-width: 701px) and (max-width: 1100px) {
  .dm { transform-origin: top right; }
}
@media (max-width: 700px) {
  .dm { width: min(304px, calc((100vw - 36px) / 1.15)); transform-origin: top right; }
}

/* Editorial callouts and light Montserrat headline. */
h1 { font-family: Montserrat, Arial, sans-serif; font-weight: 200; letter-spacing: -.045em; font-size: clamp(38px, 3.9vw, 58px); line-height: 1.14; }
.dm { position: absolute; top: 30px; bottom: auto; right: 28px; transform-origin: top right; }
.callout { position: absolute; color: #e7e9ea; pointer-events: none; }
.callout p { margin: 0 0 8px; font-size: 15px; font-weight: 500; line-height: 1.4; }
.callout small { display: block; color: #9aa4ad; font-size: 12px; font-weight: 400; line-height: 1.6; }
.callout-arrow { position: absolute; width: 100px; height: 68px; overflow: visible; }
.callout-arrow path { fill: none; stroke: #9ca9b5; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.callout-notifications { left: calc(50% - 680px * var(--scale)); top: calc(50svh - 155px * var(--scale)); width: 208px; }
.callout-notifications .callout-arrow { left: 0; top: -76px; }
.callout-post { left: calc(50% + 245px * var(--scale)); top: calc(50svh - 105px * var(--scale)); width: 265px; }
.callout-post .callout-arrow { left: -100px; top: -14px; }
.callout-message { top: 280px; right: 38px; width: 292px; }
.callout-message .callout-arrow { top: -72px; right: 60px; }
@media (min-width: 701px) and (max-width: 1190px) {
  .callout-notifications { left: 24px; top: 210px; width: 185px; }
  .callout-post { left: auto; right: 24px; top: calc(50svh + 8px); width: 240px; }
  .callout-message { top: 260px; width: 270px; right: 24px; }
  .callout p { font-size: 14px; }
  .hero { top: calc(50svh + 150px); }
}
@media (max-width: 700px) {
  body { min-height: 1330px; }
  .notification-focus { top: 58px; }
  .callout-notifications { left: 105px; top: 54px; width: calc(100% - 125px); }
  .callout-notifications .callout-arrow { left: -57px; top: -10px; width: 50px; transform: rotate(-35deg); }
  .opportunity { top: 220px; }
  .callout-post { top: 414px; left: 58px; width: calc(100% - 82px); }
  .callout-post .callout-arrow { left: -32px; top: -65px; transform: rotate(55deg); width: 72px; }
  .hero { top: 560px; }
  h1 { font-size: clamp(29px, 7.5vw, 48px); letter-spacing: -.055em; }
  .dm { top: 940px; right: 18px; }
  .callout-message { top: 1160px; right: 24px; width: min(292px, calc(100% - 48px)); }
  .callout-message .callout-arrow { right: 50px; }
}

/* Keep the explanations in the outer margins of the desktop screenshot. */
.outside-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.outside-arrows path { fill: none; stroke: #9ca9b5; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1200px) {
  .callout-notifications { left: 28px; top: calc(50svh - 80px); width: 208px; }
  .callout-post { left: auto; right: 28px; top: calc(50svh + 5px); width: 208px; }
  .callout-message { right: 28px; top: 285px; width: 208px; }
  .callout-arrow { display: none; }
}
@media (max-width: 1199px) { .outside-arrows { display: none; } }

/* Anchor the enlarged DM to the screenshot, not the viewport. */
@media (min-width: 701px) {
  .dm {
    top: calc(50svh - 433px * var(--scale) + 18px);
    right: calc(50% - 700px * var(--scale) + 18px);
    bottom: auto;
    transform-origin: top right;
  }
}

/* Keep callouts close to the interface on wide displays. */
@media (min-width: 1200px) {
  .callout-notifications {
    left: calc(50% - 700px * var(--scale) - 234px);
    top: calc(50svh - 252px * var(--scale) + 42px);
  }
  .callout-post {
    left: calc(50% + 700px * var(--scale) + 26px);
    right: auto;
    top: calc(50svh - 137px * var(--scale) + 64px);
  }
  .callout-message {
    left: calc(50% + 700px * var(--scale) + 26px);
    right: auto;
    top: calc(50svh - 433px * var(--scale) + 44px);
  }
}

/* One connector system at every breakpoint. */
.notification-focus { display: flex; align-items: center; gap: 17px; width: 242px; height: 42px; border-radius: 0; box-shadow: 0 0 12px 8px #000; }
.notification-icon { position: relative; display: grid; place-items: center; width: 33px; height: 36px; flex: none; }
.notification-label { font: 400 23px/1.2 Arial, sans-serif; color: #e7e9ea; }
.outside-arrows { display: block; z-index: 2; }
.callout { z-index: 3; }
.post-stats svg { width: 18px; height: 18px; stroke-width: 1.7; }
@media (min-width: 701px) and (max-width: 1199px) {
  body { min-height: 1080px; }
  .desktop-stage { top: 440px; }
  .notification-focus { left: 36px; top: 94px; transform: scale(.82); }
  .callout-notifications { left: 48px; top: 190px; width: 220px; }
  .dm { top: 56px; right: 34px; width: 280px; }
  .callout-message { top: 296px; right: 44px; left: auto; width: 280px; }
  .opportunity { top: 430px; left: 50%; transform: translateX(-50%); width: 490px; }
  .callout-post { top: 645px; left: calc(50% - 175px); right: auto; width: 350px; }
  .hero { top: 810px; left: 50%; }
}
@media (max-width: 700px) {
  body { min-height: 1420px; }
  .notification-focus { left: 26px; top: 54px; transform: scale(.8); }
  .callout-notifications { left: 45px; top: 155px; width: calc(100% - 70px); }
  .opportunity { top: 302px; left: 16px; transform: none; }
  .callout-post { top: 505px; left: 45px; width: calc(100% - 70px); }
  .hero { top: 674px; }
  .dm { top: 1060px; right: 18px; }
  .callout-message { top: 1280px; right: 24px; left: auto; width: min(292px, calc(100% - 48px)); }
}

/* Quiet glass backing for the explanatory callouts. */
.callout { padding: 13px 15px; border-radius: 12px; background: #050709bd; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 4px 24px #0005; }
.callout p { margin-bottom: 7px; }
.callout small { color: #a6afb8; }
.post-stats .x-native-icon { fill: currentColor; stroke: none; width: 19px; height: 19px; }

.metric { color: #7bc8ff; font-weight: 750; font-size: 1.18em; }