/* ═══════════════════════════════════════════════════════════════════
   CoreWeave — Footer explorations
   Positions transcribed from Figma node 1458:7099 (1440 desktop / 399 mobile)
   Type: Arpona Sans + Novel Mono Pro Cnd + Rig Sans (Adobe kit nzp2cvf)
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --sans:"arponasans","Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"novel-mono-pro-condensed",ui-monospace,"SFMono-Regular",monospace;
  --rig:"rig-sans",var(--sans);
  --muted:rgba(255,255,255,.5);
  --rule:rgba(255,255,255,.4);
  --ease:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;color:#0b0b0b;font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{display:block}

/* ── page chrome ─────────────────────────────────────────────────── */
.page-head{padding:64px 80px 56px;max-width:1100px}
.page-head h1{margin:0;font-weight:600;font-size:40px;line-height:1.2;letter-spacing:-.8px}

.proto{width:max-content;padding:0 80px;margin-bottom:285px}
.proto:last-of-type{margin-bottom:120px}
.proto__t{margin:0 0 40px;font-weight:500;font-size:20px;line-height:1.2;letter-spacing:-.4px;color:#0b0b0b}
.proto__row{display:flex;gap:80px;align-items:flex-start}

.stage{position:relative;flex:none;width:1440px;background:#000;color:#fff;overflow:hidden}
.stage>*{position:absolute}
.mobile{position:relative;flex:none;width:440px;background:#000;color:#fff;overflow:hidden;
        display:flex;flex-direction:column}

/* ── shared atoms ────────────────────────────────────────────────── */
.blk{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.blk--40{gap:40px}.blk--32{gap:32px}.blk--16{gap:16px}.blk--tight{gap:0}

.eye{display:flex;align-items:center;gap:10px;margin:0;
     font-family:var(--mono);font-weight:400;font-size:12px;line-height:1;
     text-transform:uppercase;color:#fff}

.h56{margin:0;font-weight:600;font-size:56px;line-height:1.2}
.h48{margin:0;font-weight:700;font-size:48px;line-height:50px}
.h40{margin:0;font-weight:600;font-size:40px;line-height:1.2}
.h36{margin:0;font-weight:700;font-size:36px;line-height:1.2;letter-spacing:-.6px}
.h32{margin:0;font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-.64px}
.h24{margin:0;font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-.48px}
.h20{margin:0;font-weight:500;font-size:20px;line-height:1.2;letter-spacing:-.4px}

.sub16{margin:0;font-weight:400;font-size:16px;line-height:1.4;color:var(--muted)}
.sub14{margin:0;font-weight:400;font-size:14px;line-height:1.4;color:var(--muted)}
.tag{margin:0;font-weight:400;font-size:16px;line-height:1.4;color:#fff}   /* 140% */

.col{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.col__t{margin:0;font-weight:500;font-size:20px;line-height:1.2;letter-spacing:-.4px;color:#fff}
.col__l{display:flex;flex-direction:column}
.col__l a{color:var(--muted);text-decoration:none;font-size:16px;line-height:1.8;
          transition:color .2s var(--ease)}
.col__l a:hover{color:#fff}
/* 1, 4, 6: длинные пункты не переносим — колонки стоят далеко друг от друга,
   места справа хватает (в макете так же ведёт себя 4-й: текст 233 в рамке 168) */
.f1 .col__l a,.f4 .col__l a,.f6 .col__l a,.f7 .col__l a{white-space:nowrap}

.addr{margin:0;font-weight:400;font-size:14px;line-height:1.4;color:var(--muted)}
.inq{margin:0;font-weight:400;font-size:16px;line-height:1.6;color:var(--muted)}
.inq a{color:#fff;text-decoration:underline;text-underline-offset:2px;
       transition:opacity .2s var(--ease)}
.inq a:hover{opacity:.7}
.inq--plain{line-height:1.6}

.soc{display:flex;align-items:center;gap:8px}
.soc a{display:block;transition:opacity .2s var(--ease)}
.soc a:hover{opacity:.65}

.legal{margin:0;display:flex;gap:24px;font-size:14px;line-height:1.6}
.legal a{color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.legal a:hover{color:#fff}
.copy{margin:0;font-weight:400;font-size:14px;line-height:1.6;color:var(--muted)}

.rule{display:block;width:100%;height:1px;background:var(--rule)}
.vrule{display:block;width:1px;background:var(--rule)}
.art{display:block}

/* ── input (no border, per spec) ─────────────────────────────────── */
.inp{position:relative;display:block;width:100%;border-radius:8px;overflow:hidden;
     background:rgba(255,255,255,.1);transition:background .2s var(--ease)}
.inp--h56{height:56px}
.inp--h48{height:48px}
.inp input{width:100%;height:100%;padding:0 16px;border:0;background:transparent;outline:none;
           color:#fff;font-family:var(--rig);font-size:16px;line-height:1.2}
.inp--h48 input{padding-left:14px}
.inp input::placeholder{color:#fff;opacity:1}
.inp:hover{background:rgba(255,255,255,.14)}
.inp:focus-within{background:rgba(255,255,255,.18)}
.inp__b{position:absolute;right:8px;top:50%;transform:translateY(-50%);
        display:grid;place-items:center;border:0;border-radius:8px;background:#fff;
        cursor:pointer;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.inp--b40 .inp__b{width:40px;height:40px}
.inp--b32 .inp__b{width:32px;height:32px}
.inp--b40 input{padding-right:56px}
.inp--b32 input{padding-right:48px}
.inp__b:hover{opacity:.85}
.inp__b:active{transform:translateY(-50%) scale(.94)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7.5px;
     height:56px;padding:0 24px;border:0;border-radius:8px;background:#fff;color:#000;
     font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.2;cursor:pointer;
     transition:opacity .2s var(--ease),transform .2s var(--ease)}
.btn--48{height:48px}
.btn:hover{opacity:.85}
.btn:active{transform:translateY(1px)}

/* ═══ 1 · Newsletter Hero ════════════════════════════════════════ */
.n1-news{left:40px;top:40px;width:387px;gap:16px}
.m1-head{gap:16px}   /* Newsletter -> заголовок: 24 - 8 */
.n1-sub{left:1090px;top:89px;width:310px}
.n1-r1{left:0;top:220px}
.n1-brand{left:40px;top:260px;width:224px}
.n1-about{left:390px;top:260px;width:168px}
.n1-prod{left:740px;top:260px;width:203px}
.n1-contact{left:1090px;top:260px;width:182px}
.n1-soc{left:40px;top:503px}
.n1-r2{left:0;top:575px}
.n1-copy{left:40px;top:598px}
.n1-legal{left:866px;top:598px}
.f1 .sub16{line-height:1.2}
/* заголовок в Figma выходит за рамку блока (491 против 387) — не переносим */
.n1-news .h56{white-space:nowrap}
.n1-brand .tag{width:224px}

/* ═══ 2 · Hero Wordmark ══════════════════════════════════════════ */
.n7-news{left:40px;top:40px;width:387px}
.n7-news .h56{white-space:nowrap}
.n7-sub{left:1090px;top:111px;width:310px}   /* низ на 210 — те же 40 до полосы, что у заголовка */
.n7-r1{left:0;top:250px}
.n7-contact{left:46px;top:290px;width:182px}
.n7-about{left:390px;top:290px;width:168px}
.n7-prod{left:740px;top:290px;width:203px}
.n7-brand{left:1090px;top:290px;width:224px}
.n7-r2{left:0;top:605px}
.n7-copy{left:40px;top:628px}
.n7-legal{left:866px;top:628px}
.n7-word{left:40px;top:685px;width:1360px;height:186px}
.f7 .sub16,.m7 .sub16{line-height:1.2}

/* ═══ 2 · Wordmark Backdrop ══════════════════════════════════════ */
.n2-word{left:40px;top:67px;width:1360px;height:186px}
.n2-r1{left:0;top:285px}
.n2-r2{left:0;top:576px}
.n2-v{left:720px;top:285px;height:291px}
.n2-about{left:40px;top:317px;width:168px}
.n2-prod{left:390px;top:317px;width:178px}
.n2-contact{left:764px;top:313px;width:178px}
.n2-soc{left:764px;top:521px}
.n2-inq{left:1090px;top:526px}
.n2-news{left:1090px;top:318px;width:310px;gap:16px}
.n2-legal{left:40px;top:599px}
.n2-copy{left:1243px;top:599px}
.f2 .col__l a{font-size:14px;line-height:1.6}
.f2 .inq{font-size:14px}

/* ═══ 3 · Wordmark Bleed ═════════════════════════════════════════ */
.n3-word{left:40px;top:385px;width:1360px;height:186px}
.n3-r1{left:0;top:291px}
.n3-v{left:700px;top:0;height:291px}
.n3-about{left:40px;top:32px;width:168px}
.n3-prod{left:390px;top:32px;width:178px}
.n3-inq{left:740px;top:34px;width:213px}
.n3-addr{left:740px;top:188px}
.n3-soc{left:1090px;top:236px}
.n3-news{left:1090px;top:33px;width:310px;gap:16px}
.n3-legal{left:40px;top:315px}
.n3-copy{left:1243px;top:315px}
.f3 .col__l a{font-size:14px;line-height:1.6}
.f3 .inq{font-size:14px}

/* ═══ 4 · Split Monogram ═════════════════════════════════════════ */
.n4-mark{left:760px;top:40px;width:637px;height:344px}
.n4-v{left:720px;top:40px;height:563px}
.n4-news{left:40px;top:24px;width:310px}
.n4-about{left:40px;top:285px;width:168px;gap:16px}
.n4-prod{left:390px;top:285px;width:282px;gap:16px}
.n4-row{left:760px;top:433px;width:640px;height:170px;
        display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.n4-copy{left:40px;top:577px}
.n4-legal{left:390px;top:577px}
.f4 .col__l a{line-height:1.6}
.f4 .copy,.f4 .legal{font-size:16px}

/* ═══ 5 · Centered Newsletter ════════════════════════════════════ */
.n5-logo{left:40px;top:36px;width:218px;height:118px}
.n5-v{left:700px;top:2px;height:640px}
.n5-side{left:390px;top:36px;width:153px;height:170px;
         display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.n5-about{left:40px;top:317px;width:168px;gap:16px}
.n5-prod{left:390px;top:317px;width:178px;gap:16px}
.n5-news{left:915px;top:226px;width:310px;align-items:center}
.n5-news__t{width:420px;margin-left:-55px;align-items:center;text-align:center}
.n5-copy{left:40px;top:581px}
.n5-legal{left:390px;top:581px}
.f5 .col__l a{font-size:14px;line-height:1.6}

/* ═══ 6 · Subscribe Panel ════════════════════════════════════════ */
.n6-logo{left:40px;top:40px;width:137px;height:74px}
.n6-v{left:700px;top:40px;height:576px}
.n6-about{left:40px;top:168px;width:168px;gap:16px}
.n6-prod{left:390px;top:168px;width:203px;gap:16px}
.n6-news{left:740px;top:40px;width:455px;gap:40px}
.n6-form{width:316px}
.n6-addr{left:40px;top:446px;width:246px}
.n6-soc{left:390px;top:446px}
.n6-inq{left:740px;top:544px}
.n6-copy{left:40px;top:574px}
.n6-legal{left:390px;top:574px}
.f6 .col__l a{line-height:1.6}
.f6 .copy,.f6 .legal{font-size:16px}
.f6 .inp input{font-family:var(--sans);padding-left:14px}

/* ═══ mobile column ══════════════════════════════════════════════ */
.m-pad{display:flex;flex-direction:column;gap:24px;align-items:flex-start;padding:24px;width:100%}
.mobile .blk{width:100%}
.m-two{display:flex;gap:24px;width:100%;align-items:flex-start}
.m-two>*{flex:1 1 0;min-width:0}
.m-row{display:flex;width:100%;gap:24px;justify-content:space-between;align-items:flex-end}
.m-center{align-items:center;text-align:center;width:100%}
.m-center .h36,.m-center .sub16{text-align:center}
.mobile .m-form{width:90%;max-width:100%}   /* та же доля, что в макете: 316 из 351 */
.mobile .col__l a{font-size:14px;line-height:1.6}
.mobile .legal{flex-wrap:wrap;gap:6px 24px}
.m-word{width:450px;height:auto;max-width:none;flex:none}
.m-word--top{margin:20px 0 0 -5px}
.m-word--bot{margin:24px 0 24px -5px}
.m4 .art,.m5 .art,.m6 .art{max-width:100%}

/* ═══ responsive: the canvas keeps its size, the page scrolls ════ */
@media (max-width:1200px){
  .page-head{padding:40px 24px 32px}
  .proto{padding:0 24px;margin-bottom:160px}
  .proto__row{gap:40px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
}