/* ============================================
   AtlasX — v2.css  (Figma "Web_White" / "Web_Black", 1920 desktop)
   Unit convention: 1rem = 10 design-px at a 1920px viewport.
   Theme: light by default, dark via prefers-color-scheme.
   ============================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

/* ---- Reset ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: calc(100vw / 192); scroll-behavior: smooth; }
body { font-family: var(--ff-body); color: var(--c-fg); background: var(--c-bg); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---- Tokens ----------------------------------------------------- */
:root {
  color-scheme: light dark;
  --ff-display: 'Playfair Display', 'Times New Roman', serif;
  --ff-body: 'Pretendard', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ff-inter: 'Inter', 'Pretendard', system-ui, sans-serif;

  --c-bg: #ffffff;
  --c-bg-deep: #ffffff;
  --c-fg: #000000;
  --c-fg-2: #353535;
  --c-fg-soft: #595959;
  --c-fg-muted: #797979;
  --c-fg-dim: #7f7f7f;
  --c-line: rgba(0,0,0,.15);
  --c-line-2: rgba(0,0,0,.1);
  --c-line-strong: #000000;
  --c-btn-bg: #000000;
  --c-btn-fg: #ffffff;
  --c-btn-border: rgba(0,0,0,.7);
  --c-quote: rgba(0,0,0,.3);
  --c-step-num: rgba(0,0,0,.5);
  --c-hero-onchain: #797979;
  --c-hero-heading: #000000;
  --c-feat-heading: #000000;
  --c-conv-heading: #7f7f7f;
  --c-conv-panel: rgba(255,255,255,.63);
  --c-conv-panel-border: rgba(3,3,3,0);
  --c-conv-shadow: 4px 4px 25.4px rgba(146,146,146,.25);
  --c-conv-foot-line: rgba(0,0,0,.5);
  --c-conv-label: rgba(0,0,0,.6);
  --c-conv-dot: rgba(0,0,0,.4);
  --c-conv-onchain: rgba(0,0,0,.5);
  --c-conv-avatar-border: rgba(0,0,0,.3);
  --c-conv-exec-bg: #000000;
  --c-conv-exec-fg: #d4d4d4;
  --c-metric-num: #353535;
  --c-brand-quote: #000000;
  --c-brand-quote-em: #797979;
  --c-fade: 255,255,255;            /* rgb used for image fades */
  --c-fade-deep: 255,255,255;
  --goldline: linear-gradient(90deg, rgba(65,65,65,0) 0%, rgba(65,65,65,.43) 21.4%, rgba(65,65,65,.57) 28.6%, rgba(65,65,65,.71) 35.7%, rgba(65,65,65,.86) 42.9%, #000 50%, rgba(65,65,65,.86) 57.1%, rgba(65,65,65,.71) 64.3%, rgba(65,65,65,.57) 71.4%, rgba(65,65,65,.43) 78.6%, rgba(0,0,0,0) 100%);
  --goldline-light: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(127,127,127,.43) 21.4%, rgba(166,166,166,.57) 28.6%, rgba(192,192,192,.71) 35.7%, rgba(235,235,235,.86) 42.9%, #fff 50%, rgba(235,235,235,.86) 57.1%, rgba(192,192,192,.71) 64.3%, rgba(166,166,166,.57) 71.4%, rgba(127,127,127,.43) 78.6%, rgba(0,0,0,0) 100%);
  --goldline-section: var(--goldline);
  --c-mute: #666666;
  --c-line-soft: rgba(102,102,102,.4);
  --c-dark-1: #121212;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #080705;
    --c-bg-deep: #0c0b09;
    --c-fg: #ffffff;
    --c-fg-2: #ebebeb;
    --c-fg-soft: #a6a6a6;
    --c-fg-muted: #a6a6a6;
    --c-fg-dim: #cacaca;
    --c-line: rgba(255,255,255,.25);
    --c-line-2: rgba(201,169,110,.1);
    --c-line-strong: #ffffff;
    --c-btn-bg: #ebebeb;
    --c-btn-fg: #080705;
    --c-btn-border: rgba(255,255,255,.7);
    --c-quote: rgba(255,255,255,.3);
    --c-step-num: rgba(255,255,255,.6);
    --c-hero-onchain: #ffffff;
    --c-hero-heading: #a6a6a6;
    --c-feat-heading: #a6a6a6;
    --c-conv-heading: #cacaca;
    --c-conv-panel: #0c0b09;
    --c-conv-panel-border: rgba(255,255,255,.7);
    --c-conv-shadow: none;
    --c-conv-foot-line: rgba(255,255,255,.5);
    --c-conv-label: rgba(255,255,255,.6);
    --c-conv-dot: rgba(255,255,255,.4);
    --c-conv-onchain: rgba(255,255,255,.5);
    --c-conv-avatar-border: rgba(255,255,255,.3);
    --c-conv-exec-bg: #ebebeb;
    --c-conv-exec-fg: #0c0b09;
    --c-metric-num: #ffffff;
    --c-brand-quote: #a6a6a6;
    --c-brand-quote-em: #ffffff;
    --c-fade: 8,7,5;
    --c-fade-deep: 12,11,9;
    --goldline-section: var(--goldline-light);
    --c-mute: #a6a6a6;
    --c-line-soft: rgba(255,255,255,.3);
    --c-dark-1: #ebebeb;
  }
}

/* ---- Type utilities --------------------------------------------- */
.serif { font-family: var(--ff-display); font-weight: 400; }
.label { font-family: var(--ff-body); font-weight: 400; text-transform: uppercase; letter-spacing: .25rem; font-size: 1.7rem; line-height: 1.5rem; }
.goldline { height: 1px; background: var(--goldline); }
.goldline--section { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--goldline-section); }

/* ---- Buttons ---------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem; text-transform: uppercase; white-space: nowrap; font-family: var(--ff-inter); font-weight: 600; transition: opacity .25s ease; }
.btn--solid { background: var(--c-btn-bg); color: var(--c-btn-fg); }
.btn--outline { border: 1px solid var(--c-btn-border); color: var(--c-fg); font-weight: 500; }
.btn.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.link.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ============================================================
   PAGE FRAME — every section is a 1920-wide stage
============================================================ */
.stage { position: relative; width: 100%; max-width: 192rem; margin: 0 auto; }

/* ============================================================
   HEADER
============================================================ */
.hdr { height: 6.4rem; position: relative; z-index: 20; }
.hdr__logo { position: absolute; left: 15rem; top: .9rem; width: 13.5rem; height: 4.5rem; display: flex; align-items: center; justify-content: center; }
.hdr__logo img { width: 11.25rem; height: 1.42rem; }
.hdr__nav { position: absolute; left: 50%; top: 2.4rem; transform: translateX(-50%); display: flex; gap: 3.2rem; }
.hdr__nav a { font-size: 1.2rem; line-height: 1.6rem; letter-spacing: .18rem; text-transform: uppercase; }
.hdr__cta { position: absolute; left: 151.9rem; top: 1.5rem; display: flex; gap: 1.2rem; }
.hdr__cta .btn { font-family: var(--ff-body); font-size: 1.2rem; line-height: 1.6rem; letter-spacing: .18rem; padding: .8rem 1.6rem; }
.hdr__cta .btn--outline { padding: .9rem 1.7rem; }

/* ============================================================
   HERO   (frame y 64 → 1913)
============================================================ */
.hero { height: 184.9rem; overflow: hidden; }
.hero__bg { position: absolute; left: 15rem; top: 29.1rem; width: 161.1rem; height: 132.5rem; pointer-events: none; }
.hero__bg img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.hero__bg--dark { left: 14.1rem; top: 5.5rem; width: 159.8rem; height: 148.3rem; }
.hero__bg-fade { position: absolute; left: 24.6rem; top: 33.3rem; width: 142.7rem; height: 97.4rem; background: linear-gradient(180deg, rgba(var(--c-fade),1) 0%, rgba(var(--c-fade),0) 21.2%, rgba(var(--c-fade),0) 100%); pointer-events: none; }

.hero__label { position: absolute; left: 0; right: 0; top: 11.6rem; text-align: center; font-size: 2rem; letter-spacing: .25rem; color: var(--c-fg-2); }
.hero__h { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--ff-display); font-size: 10.8rem; line-height: 11rem; letter-spacing: -.216rem; color: var(--c-hero-heading); white-space: nowrap; }
.hero__h--1 { top: 12.7rem; }
.hero__h--2 { top: 22.1rem; line-height: 11.2rem; }
.hero__h--3 { top: 33.3rem; line-height: 11.2rem; }
.hero__h--4 { top: 43.4rem; font-style: italic; color: var(--c-hero-onchain); }
.hero__goldline { position: absolute; left: 75rem; top: 59.3rem; width: 43.4rem; }
.hero__p { position: absolute; left: 50%; top: 65.5rem; width: 46.6rem; transform: translateX(-50%); font-weight: 300; font-size: 2.2rem; line-height: 2.6rem; letter-spacing: .04rem; color: var(--c-fg-2); }
.hero__cta { position: absolute; left: 50%; top: 73.3rem; transform: translateX(-50%); display: flex; gap: 1.6rem; align-items: center; }
.hero__cta .btn { font-size: 1.5rem; line-height: 1.6rem; letter-spacing: .24rem; padding: 1.6rem 3.2rem; }
.hero__cta .btn--outline { padding: 1.7rem 3.3rem; }
.hero__cta .btn__arrow { font-size: 1.2rem; }
.hero__metrics { position: absolute; left: 0; right: 0; top: 87.7rem; display: flex; justify-content: center; gap: 4.8rem; }
.hero__metric { display: flex; align-items: center; gap: 1.6rem; }
.hero__metric b { font-family: var(--ff-display); font-weight: 400; font-size: 3rem; line-height: 3.2rem; }
.hero__metric span { font-size: 1.5rem; line-height: 1.5rem; letter-spacing: .15rem; text-transform: uppercase; }

/* hero cards (screenshots incl. drop shadow) — static */
.hero__card { position: absolute; width: 64.9rem; height: 67.2rem; pointer-events: none; }
.hero__card img { position: absolute; top: -3.8rem; left: 50%; transform: translateX(-50%); height: 82.5rem; width: auto; max-width: none; }
.hero__card--zeus { left: 2.3rem; top: 102.7rem; z-index: 1; }
.hero__card--artemis { left: 64rem; top: 99.1rem; z-index: 2; }
.hero__card--ares { left: 124.8rem; top: 102.7rem; z-index: 1; }
.hero__side-fade { position: absolute; top: 99rem; width: 32.9rem; height: 80rem; pointer-events: none; z-index: 3; }
.hero__side-fade--l { left: 0; background: linear-gradient(90deg, rgba(var(--c-fade),1) 0%, rgba(var(--c-fade),0) 100%); }
.hero__side-fade--r { right: 0; background: linear-gradient(270deg, rgba(var(--c-fade),1) 0%, rgba(var(--c-fade),0) 100%); }
.hero__bottom-fade { position: absolute; left: 0; right: 0; top: 154rem; height: 33.9rem; background: linear-gradient(180deg, rgba(var(--c-fade),0) 0%, rgba(var(--c-fade),1) 60%); pointer-events: none; z-index: 3; }
.hero__float { position: absolute; left: 86.4rem; top: 171.6rem; z-index: 4; }
.hero__float .btn { font-size: 1.5rem; line-height: 1.83rem; letter-spacing: .11rem; text-transform: none; padding: 1.6rem 3.2rem; border-radius: .23rem; box-shadow: 0 1.14rem 1.72rem -.34rem rgba(0,0,0,.1), 0 .46rem .69rem -.46rem rgba(0,0,0,.1); }
.hero__float .btn img { width: 1rem; height: 1rem; }
@media (prefers-color-scheme: dark) { .hero__float .btn img { filter: invert(1); } }

/* ============================================================
   ABOUT   (frame y 1913 → 3101)  ⇒ section height 118.8rem
============================================================ */
.about { height: 118.8rem; overflow: hidden; }
.about__sculpture { position: absolute; left: 124.8rem; top: 4.4rem; width: 60.8rem; height: 114.4rem; pointer-events: none; }
.about__sculpture img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.about__sculpture-fade { position: absolute; left: 117.2rem; top: 78.8rem; width: 62.3rem; height: 41.2rem; background: linear-gradient(180deg, rgba(var(--c-fade),0) 0%, rgba(var(--c-fade),1) 100%); pointer-events: none; }
.about__head { position: absolute; left: 15.1rem; top: 26.3rem; display: flex; align-items: center; gap: 2.4rem; }
.about__head .line { width: 32rem; height: 1px; background: var(--c-line); }
.about__rule { position: absolute; left: 20.2rem; top: 41.3rem; width: 1px; height: 9.6rem; background: var(--c-line); }
.about__quote { position: absolute; left: 15.1rem; top: 34.3rem; font-family: var(--ff-display); font-size: 9.6rem; line-height: 9.6rem; color: var(--c-quote); }
.about__text { position: absolute; left: 15.1rem; top: 44.7rem; width: 67.2rem; font-family: var(--ff-display); font-weight: 300; font-size: 5.2rem; line-height: 6.24rem; }
.about__text em { font-style: italic; }
.about__steps { position: absolute; left: 15.4rem; top: 77.3rem; width: 104rem; display: grid; grid-template-columns: 26rem 26.1rem 25.9rem 26rem; border-top: 1px solid var(--c-line); }
.step { height: 24.9rem; padding: 3.2rem 3.3rem 4.8rem 3.2rem; border-right: 1px solid var(--c-line); }
.step:first-child { padding-left: 0; }
.step:last-child { border-right: 0; padding-right: 0; }
.step__num { font-size: 1.5rem; line-height: 1.5rem; letter-spacing: .2rem; color: var(--c-step-num); }
.step__title { padding-top: 1.6rem; font-family: var(--ff-display); font-style: italic; font-weight: 500; font-size: 3rem; line-height: 2.8rem; }
.step__desc { padding-top: 1.2rem; font-family: var(--ff-inter); font-weight: 300; font-size: 1.8rem; line-height: 2.2rem; }

/* ============================================================
   THENA / TRADER   (frame y 3101 → 4181) ⇒ 108rem
============================================================ */
.duo { height: 108rem; overflow: hidden; }
.duo__rule { position: absolute; left: 20.2rem; top: 16.6rem; width: 9.6rem; height: 1px; background: var(--c-line); }
.duo__thena { position: absolute; left: 21.9rem; top: 17.5rem; width: 45.8rem; height: 53.3rem; }
.duo__thena img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.duo__thena-fade { position: absolute; left: 14.1rem; top: 34.7rem; width: 58.6rem; height: 36.2rem; background: linear-gradient(180deg, rgba(var(--c-fade),0) 40%, rgba(var(--c-fade),.75) 85%, rgba(var(--c-fade),1) 100%); pointer-events: none; }
@media (prefers-color-scheme: dark) { .duo__thena-fade { background: linear-gradient(180deg, rgba(var(--c-fade),0) 0%, rgba(var(--c-fade),.99) 96%); top: 30rem; height: 31.6rem; left: 20.3rem; width: 48.8rem; } }
.duo__thena-label { position: absolute; left: 24.2rem; top: 74.8rem; font-size: 1.8rem; line-height: 1.5rem; letter-spacing: .25rem; text-transform: uppercase; }
.duo__thena-name { position: absolute; left: 24.2rem; top: 78.6rem; font-family: var(--ff-display); font-style: italic; font-weight: 500; font-size: 6rem; line-height: 3.6rem; }
.duo__center { position: absolute; left: 80.9rem; top: 33.5rem; width: 30.2rem; display: flex; flex-direction: column; align-items: center; }
.duo__center .line { width: 100%; height: 1px; background: var(--c-line-strong); }
.duo__diamond { width: 2.4rem; height: 2.4rem; margin: 1.6rem 0; border: 1px solid var(--c-line-strong); transform: rotate(45deg); display: flex; align-items: center; justify-content: center; }
.duo__diamond::after { content: ""; width: .6rem; height: .6rem; background: var(--c-line-strong); }
.duo__center p { margin-top: 2.4rem; text-align: center; text-transform: uppercase; letter-spacing: .24rem; font-size: 3rem; line-height: 5.2rem; white-space: nowrap; }
.duo__trader { position: absolute; left: 121.4rem; top: 30.2rem; width: 48.8rem; height: 65.1rem; }
.duo__trader img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.duo__trader-fade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--c-fade),.8) 0%, rgba(var(--c-fade),0) 50%); }
.duo__corner-v { position: absolute; left: 171.7rem; top: 28.6rem; width: 1px; height: 9.6rem; background: rgba(201,169,110,.3); }
.duo__corner-h { position: absolute; left: 162.2rem; top: 28.6rem; width: 9.6rem; height: 1px; background: rgba(201,169,110,.3); }
@media (prefers-color-scheme: dark) { .duo__corner-v, .duo__corner-h { background: rgba(255,255,255,.3); } }
.duo__trader-label { position: absolute; left: 121.4rem; top: 86.8rem; font-size: 1.8rem; line-height: 1.5rem; letter-spacing: .25rem; text-transform: uppercase; }
.duo__trader-name { position: absolute; left: 120.9rem; top: 91.5rem; font-family: var(--ff-display); font-style: italic; font-weight: 500; font-size: 6rem; line-height: 3.6rem; }

/* ============================================================
   LIVE CONVERSATION   (frame y 4181 → 5261) ⇒ 108rem
============================================================ */
.conv { height: 108rem; overflow: hidden; background: var(--c-bg); }
@media (prefers-color-scheme: dark) { .conv { background: linear-gradient(90deg, #080705 0%, rgba(2,2,1,.667) 33%, rgba(0,0,0,.333) 67%, rgba(0,0,0,0) 100%), #080705; } }
.conv__bg { position: absolute; left: 102rem; top: 3.4rem; width: 102.8rem; height: 101.3rem; opacity: .1; pointer-events: none; }
.conv__bg img { width: 100%; height: 100%; object-fit: cover; }
.conv__text { position: absolute; left: 12.5rem; top: 49.4rem; width: 39.9rem; }
.conv__h { padding-top: 2.4rem; font-family: var(--ff-display); font-weight: 300; font-size: 6rem; line-height: 6.2rem; white-space: nowrap; }
.conv__h .dim { color: var(--c-conv-heading); }
.conv__h em { font-style: italic; }
.conv__p { padding-top: 5.6rem; font-family: var(--ff-inter); font-weight: 300; font-size: 2.5rem; line-height: 3.3rem; }
@media (prefers-color-scheme: dark) { .conv__p { line-height: 3.8rem; } }

.panel { position: absolute; left: 60.9rem; top: 32.3rem; width: 118.6rem; height: 67.9rem; background: var(--c-conv-panel); border: 1px solid var(--c-conv-panel-border); box-shadow: var(--c-conv-shadow); padding: 1px; display: flex; flex-direction: column; }
.panel__head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 2.4rem 1.3rem; border-bottom: 1px solid rgba(201,169,110,.1); }
.panel__head .left { display: flex; align-items: center; gap: 1.2rem; }
.panel__head .dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--c-conv-dot); }
.panel__head .title { font-size: 1.3rem; line-height: 1.5rem; letter-spacing: .2rem; text-transform: uppercase; }
.panel__head .right { display: flex; align-items: center; gap: 1.6rem; }
.panel__head .onchain { font-size: 1.2rem; line-height: 1.35rem; letter-spacing: .09rem; text-transform: uppercase; color: var(--c-conv-onchain); }
.panel__head .dot2 { width: .6rem; height: .6rem; border-radius: 50%; background: var(--c-line-strong); opacity: .69; }
.panel__body { margin-top: 4rem; height: 43.8rem; padding: 2.4rem; display: flex; flex-direction: column; }
.msg { display: flex; gap: 1.6rem; align-items: flex-start; }
.msg--me { justify-content: flex-end; }
.msg + .msg { padding-top: 2.4rem; }
.msg__col { display: flex; flex-direction: column; gap: .4rem; }
.msg--me .msg__col { align-items: flex-end; }
.msg__who { font-size: 1.1rem; line-height: 1.2rem; letter-spacing: .16rem; text-transform: uppercase; color: var(--c-conv-label); }
.msg__bubble { padding: 1.3rem 2.1rem; font-family: var(--ff-inter); font-weight: 400; font-size: 2rem; line-height: 2.275rem; color: #fff; white-space: nowrap; }
.msg--me .msg__bubble { background: #7f7f7f; border: 1px solid rgba(0,0,0,.2); }
.msg--ai .msg__bubble { background: #2b2b2b; border: 1px solid rgba(0,0,0,.15); font-size: 1.8rem; white-space: normal; width: 64.1rem; }
@media (prefers-color-scheme: dark) { .msg__bubble { font-weight: 300; } .msg--me .msg__bubble { border-color: rgba(255,255,255,.2); } .msg--ai .msg__bubble { border-color: rgba(255,255,255,.15); font-size: 2rem; } }
.msg__avatar { width: 3.2rem; height: 3.2rem; border: 1px solid var(--c-conv-avatar-border); flex: none; overflow: hidden; margin-top: 1.6rem; }
.msg__avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg--ai .msg__avatar { border-color: rgba(0,0,0,.4); }
@media (prefers-color-scheme: dark) { .msg--ai .msg__avatar { border-color: rgba(255,255,255,.4); } }
.msg__typing { display: inline-flex; gap: .6rem; align-items: center; padding: 1.3rem 2.1rem; background: #2b2b2b; border: 1px solid rgba(0,0,0,.15); margin-top: 1.6rem; }
.msg__typing i { width: .4rem; height: .4rem; border-radius: 50%; background: #fff; }
.panel__foot { margin-top: auto; height: 8.6rem; border-top: 1px solid var(--c-conv-foot-line); display: flex; align-items: center; justify-content: space-between; padding: 1.7rem 2.4rem 1.6rem; }
.panel__foot .cont { font-size: 1.3rem; line-height: 1.5rem; letter-spacing: .2rem; text-transform: uppercase; }
.panel__foot .acts { display: flex; gap: 1.2rem; }
.panel__foot .acts span { font-size: 1.3rem; line-height: 1.5rem; letter-spacing: .15rem; text-transform: uppercase; padding: .7rem 1.7rem; border: 1px solid #b4b4b4; }
.panel__foot .acts .exec { background: var(--c-conv-exec-bg); border-color: var(--c-conv-exec-bg); color: var(--c-conv-exec-fg); }

/* ============================================================
   FEATURES   (frame y 5261 → 8501) ⇒ 324rem
============================================================ */
.feat { height: 324rem; overflow: hidden; }
.feat__head { position: absolute; left: 14.2rem; top: 15rem; width: 163.6rem; height: 19.3rem; }
.feat__h { padding-top: 2.4rem; font-family: var(--ff-display); font-size: 7.715rem; line-height: 7.715rem; white-space: nowrap; color: var(--c-feat-heading); }
.feat__h em { font-style: italic; color: var(--c-fg); }
.feat__intro { position: absolute; left: 72.8rem; top: 14.7rem; width: 59.5rem; font-weight: 300; font-size: 2.5rem; line-height: 3rem; }
.feat__goldline { position: absolute; left: 90rem; top: 12.2rem; width: 42.8rem; height: 1px; background: var(--goldline-light); }
.feature { position: absolute; left: 14.2rem; width: 163.6rem; height: 51.3rem; border-top: 1px solid var(--c-line-2); }
.feature--1 { top: 0; height: 118.8rem; border-top: 0; }
.feature--2 { top: 118.8rem; }
.feature--3 { top: 187.6rem; }
.feature--4 { top: 256.4rem; }
.feature__text { position: absolute; width: 59.2rem; }
.feature__title { font-family: var(--ff-display); font-weight: 300; font-size: 6rem; line-height: 3.6rem; white-space: nowrap; }
.feature__desc { margin-top: 1.7rem; padding: 3.2rem 0 0 .4rem; width: 44.8rem; font-weight: 300; font-size: 2.5rem; line-height: 3rem; color: var(--c-fg-soft); }
@media (prefers-color-scheme: dark) { .feature__desc { line-height: 3.5rem; } }
.feature__img { position: absolute; overflow: hidden; }
.feature__img img { width: 100%; height: 100%; object-fit: cover; }
.feature__img-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(0deg, rgba(var(--c-fade),.6) 0%, rgba(var(--c-fade),0) 100%); }
@media (prefers-color-scheme: dark) { .feature__img { background: var(--c-bg-deep); } .feature__img-fade { height: 100%; background: linear-gradient(0deg, rgba(var(--c-fade-deep),.6) 0%, rgba(0,0,0,0) 100%); } }
/* 1 · Quant Team — clock illustration on the left */
.feat__clock { position: absolute; left: 18.9rem; top: 44.6rem; width: 53.4rem; height: 71.2rem; opacity: .9; }
.feat__clock img { width: 100%; height: 100%; object-fit: cover; }
.feat__clock-fade { position: absolute; left: 10.2rem; top: 47.4rem; width: 71.2rem; height: 71.2rem; background: linear-gradient(0deg, rgba(var(--c-fade),.6) 0%, rgba(var(--c-fade),0) 100%); pointer-events: none; }
.feature--1 .feature__text { left: 104.4rem; top: 68.4rem; }
/* 2 · Execute with Edge — dome on the right */
.feature--2 .feature__img { left: 103.7rem; top: 5.5rem; width: 54.7rem; height: 54.7rem; }
.feature--2 .feature__text { left: 9rem; top: 18.17rem; }
/* 3 · Earn — eye on the left */
.feature--3 .feature__img { left: 11.3rem; top: 2.7rem; width: 45.4rem; height: 63.6rem; }
.feature--3 .feature__img img { object-fit: contain; }
.feature--3 .feature__text { left: 104.4rem; top: 18.27rem; }
@media (prefers-color-scheme: dark) { .feature--3 .feature__img { left: 10.4rem; top: 3.4rem; width: 50rem; height: 50rem; } .feature--3 .feature__img img { object-fit: cover; object-position: center 20%; } }
/* 4 · Deep Anything — sphere on the right */
.feature--4 .feature__img { left: 103rem; top: 7.3rem; width: 50rem; height: 50rem; }
.feature--4 .feature__text { left: 10.4rem; top: 18.34rem; }

/* ============================================================
   BRAND STATEMENT   (frame y 8501 → 9639) ⇒ 113.8rem
============================================================ */
.brand { height: 113.8rem; overflow: hidden; }
.brand__inner { position: absolute; left: 11rem; top: 14.8rem; width: 170rem; padding: 0 3.2rem; display: flex; flex-direction: column; align-items: center; }
.brand__inner .label { color: var(--c-fg-2); text-align: center; }
@media (prefers-color-scheme: dark) { .brand__inner .label { color: #fff; font-size: 1.4rem; } }
.brand__q { padding-top: 4.8rem; width: 89.6rem; text-align: center; font-family: var(--ff-display); font-weight: 300; font-size: 8.5rem; line-height: 9.335rem; color: var(--c-brand-quote); }
.brand__q em { font-style: italic; color: var(--c-brand-quote-em); }
.brand__q .q2 { font-style: italic; color: var(--c-fg-2); }
@media (prefers-color-scheme: dark) { .brand__q .q2 { color: #fff; } }
.brand__goldline { margin-top: 6.5rem; width: 68rem; height: 1px; background: var(--goldline-light); }
.brand__p { padding-top: 6.4rem; width: 51.2rem; text-align: center; font-weight: 300; font-size: 2.5rem; line-height: 3rem; color: var(--c-fg-soft); }
@media (prefers-color-scheme: dark) { .brand__p { color: #fff; } }
.metrics { position: absolute; left: 35.2rem; top: 74.9rem; width: 121.6rem; display: flex; }
.metric { width: 40.53rem; padding: 8rem 4.8rem; border-right: 1px solid var(--c-line); text-align: center; }
.metric:last-child { border-right: 0; }
@media (prefers-color-scheme: dark) { .metric { border-color: rgba(201,169,110,.15); } }
.metric__num { font-family: var(--ff-display); font-weight: 300; font-size: 9.258rem; line-height: 9.258rem; color: var(--c-metric-num); white-space: nowrap; }
.metric__label { padding-top: 1.6rem; font-size: 1.4rem; line-height: 1.5rem; letter-spacing: .25rem; text-transform: uppercase; }
.metric__sub { padding-top: .8rem; font-family: var(--ff-inter); font-weight: 300; font-size: 1.6rem; line-height: 1.6rem; }
@media (prefers-color-scheme: dark) { .metric__label, .metric__sub { color: #a6a6a6; } }

/* ============================================================
   FINAL CTA   (frame y 9639 → 10661) ⇒ 102.2rem  — always dark
============================================================ */
.cta { height: 102.2rem; overflow: hidden; background: #080705; color: #fff; }
.cta__topline { position: absolute; left: 0; right: 0; top: 0; height: .9rem; background: var(--goldline-light); opacity: .9; }
@media (prefers-color-scheme: dark) { .cta__topline { height: 1px; top: 5.8rem; } }
.cta__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 135.76rem 75.7rem at 50% 50%, rgba(201,169,110,.03) 0%, rgba(0,0,0,0) 70%); }
.cta__bg { position: absolute; left: 18.5rem; top: 2.1rem; width: 155rem; height: 103.8rem; opacity: .1; overflow: hidden; pointer-events: none; }
.cta__bg img { position: absolute; left: 0; top: -41.5%; width: 100%; height: 188%; object-fit: cover; opacity: .5; }
.cta__inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 67.2rem; display: flex; flex-direction: column; align-items: center; }
.cta__inner .label { color: #fff; text-align: center; }
@media (prefers-color-scheme: dark) { .cta__inner .label { font-size: 1.4rem; } }
.cta__h1 { padding-top: 3.2rem; font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: 12rem; line-height: 12rem; color: #a6a6a6; }
.cta__h2 { padding-top: .8rem; font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: 12rem; line-height: 12rem; color: #fff; }
.cta__goldline { margin: 6.4rem 0; width: 12rem; height: 1px; background: var(--goldline-light); }
.cta .btn { background: #ebebeb; color: #080705; font-size: 1.7rem; line-height: 2rem; letter-spacing: .35rem; padding: 2rem 4.8rem; gap: 1.6rem; }
.cta .btn .btn__arrow { font-size: 1.4rem; }
@media (prefers-color-scheme: dark) { .cta .btn { font-size: 1.4rem; } }

/* ============================================================
   FOOTER   (frame y 10661 → 11201) ⇒ 54rem — always dark
============================================================ */
.ftr { height: 54rem; background: #000; color: #fff; }
@media (prefers-color-scheme: dark) { .ftr { background: #080705; } }
.ftr__inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 170rem; height: 36.9rem; padding: 0 3.2rem 2.2rem; display: flex; flex-direction: column; justify-content: center; gap: 1.3rem; }
.ftr__grid { position: relative; height: 10.3rem; }
.ftr__brand { position: absolute; left: 0; top: 0; width: 38.4rem; }
.ftr__brand img { width: 11.25rem; height: 1.42rem; margin: 1.5rem 0 1.6rem 1.1rem; }
.ftr__brand p { padding-top: 1.6rem; width: 32rem; font-weight: 300; font-size: 1.2rem; line-height: 1.95rem; }
.ftr__col { position: absolute; top: 0; width: 17.6rem; }
.ftr__col--product { left: 94rem; }
.ftr__col--support { left: 114.8rem; }
.ftr__col h4 { margin: 0; font-weight: 400; font-size: 1rem; line-height: 1.5rem; letter-spacing: .2rem; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ftr__col a, .ftr__col span { display: block; font-size: 1.2rem; line-height: 1.6rem; }
.ftr__col li:first-of-type a, .ftr__col li:first-of-type span { padding-top: 1.6rem; }
.ftr__col li + li a, .ftr__col li + li span { padding-top: .8rem; }
.ftr__contact { position: absolute; left: 135.6rem; top: 0; width: 28rem; text-align: right; }
.ftr__contact h4 { margin: 0; padding-bottom: 1.6rem; font-weight: 400; font-size: 1rem; line-height: 1.5rem; letter-spacing: .2rem; text-transform: uppercase; }
.ftr__contact a { font-family: var(--ff-inter); font-size: 1.2rem; line-height: 1.6rem; }
.ftr__goldline { margin-top: 4.9rem; width: 100%; height: 1px; background: var(--goldline-light); }
.ftr__bottom { height: 4.7rem; display: flex; align-items: center; justify-content: space-between; }
.ftr__copy { font-family: var(--ff-inter); font-size: 1rem; line-height: 1.5rem; letter-spacing: .1rem; }
.ftr__legal { display: flex; gap: 2.4rem; }
.ftr__legal a { font-size: 1rem; line-height: 1.5rem; letter-spacing: .1rem; color: rgba(255,255,255,.75); }
.ftr__legal a:hover { color: #fff; text-decoration: underline; }
.ftr__tag { font-size: .9rem; line-height: 1.35rem; letter-spacing: .135rem; text-transform: uppercase; color: rgba(255,255,255,.4); }

/* ---- Reveal-on-scroll (progressive) ----------------------------- */
.js-ready .reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity .8s ease, transform .8s ease; }
.js-ready .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-ready .reveal { opacity: 1; transform: none; transition: none; } }