@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-variable.de2f1fe81758.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.79936b18df9f.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.b1c8a895f5fd.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600.5a2ce7798732.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400.b2c9031d9fd6.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400.b2c9031d9fd6.woff2") format('woff2');
}

:root{
  --steel:#38423F;
  --steel-deep:#2A322F;
  --paper:#FAFAF5;
  --ink:#16211D;
  --ink-soft:#5C6862;
  --hivis:#FF6A13;
  --chalk:#A9B4AF;

  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--steel);color:var(--paper);font-family:var(--body);line-height:1.5;overflow-x:hidden}
:focus-visible{outline:2px solid var(--hivis);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}

/* ---------- masthead ---------- */
.mast{display:flex;align-items:center;justify-content:space-between;padding:26px 0 0}
.logo{font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 800;
      font-size:19px;letter-spacing:-.02em;text-transform:uppercase}
.logo span{color:var(--hivis)}
.mast nav{display:flex;gap:26px;align-items:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.mast nav a:not(.btn){color:var(--chalk);text-decoration:none}
.mast nav a:not(.btn):hover{color:var(--paper)}

.btn{display:inline-block;background:var(--hivis);color:var(--ink);
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;padding:11px 18px;border:none;cursor:pointer}
.btn:hover{background:#FF8438}
.btn-ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px #6C7873}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

/* ---------- hero ---------- */
.hero{padding:74px 0 96px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--hivis);display:flex;align-items:center;gap:10px;margin-bottom:22px}
.eyebrow::after{content:"";flex:1;height:1px;background:#5A6560}

h1{font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 800;
   font-size:clamp(38px,4.4vw,60px);line-height:.97;letter-spacing:-.028em;text-transform:uppercase}
h1 em{font-style:normal;color:var(--hivis)}
.sub{margin-top:24px;font-size:17px;color:#D3DAD7;max-width:38ch}
.cta-row{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.note{margin-top:20px;font-family:var(--mono);font-size:11.5px;color:var(--chalk);letter-spacing:.03em}

/* ---------- chat window ---------- */
.chat{background:var(--paper);color:var(--ink);border-radius:14px;overflow:hidden;
      box-shadow:0 22px 50px rgba(0,0,0,.36)}
.chat-bar{display:flex;align-items:center;gap:10px;padding:13px 18px;
          border-bottom:1px solid #E4E4DB;background:#F2F2EA}
.chat-bar .mark{width:20px;height:20px;border-radius:5px;background:var(--ink);
                display:grid;place-items:center;color:var(--paper);
                font-family:var(--mono);font-size:11px;font-weight:600}
.chat-bar .who{font-size:13px;font-weight:500;color:var(--ink)}
.chat-bar .tag{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
               text-transform:uppercase;color:#8A948E}

.thread{height:404px;overflow:hidden;padding:22px 20px;scroll-behavior:smooth}

.msg{margin-bottom:20px}
.msg-user{display:flex;justify-content:flex-end}
.bubble{background:#EAEAE1;border-radius:14px 14px 4px 14px;padding:11px 15px;
        font-size:14.5px;max-width:82%}

.lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
     color:#8A948E;margin-bottom:7px}
.lbl-hi{color:var(--hivis);font-weight:600}
.reply{display:flex;gap:11px;align-items:flex-start}
.av{flex:0 0 24px;height:24px;border-radius:50%;background:#DCDCD2;margin-top:1px;
    display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:#8A948E}
.av-hi{background:var(--hivis);color:#fff}
.body-txt{font-size:14.5px;color:#6E7973;max-width:88%}
.body-txt.win{color:var(--ink)}
.cur{display:inline-block;width:7px;height:14px;background:var(--ink);
     transform:translateY(2px);margin-left:1px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:#B4BDB7;
           margin-right:4px;animation:bob 1.3s ease-in-out infinite}
.dots span:nth-child(2){animation-delay:.18s}
.dots span:nth-child(3){animation-delay:.36s}
@keyframes bob{0%,60%,100%{opacity:.3}30%{opacity:1}}

.composer{border-top:1px solid #E4E4DB;padding:12px 18px;display:flex;align-items:center;gap:10px;
          background:#F7F7F0}
.composer .field{flex:1;font-size:13.5px;color:#A2ABA5}
.composer .send{width:26px;height:26px;border-radius:7px;background:#E0E0D6;display:grid;
                place-items:center;color:#9AA49E;font-size:13px}

/* ---------- window ---------- */
.window{background:var(--steel-deep);padding:88px 0}
.window .eyebrow{margin-bottom:26px}
h2{font-family:var(--display);font-variation-settings:'wdth' 110,'wght' 800;
   font-size:clamp(30px,3.3vw,44px);line-height:1.02;letter-spacing:-.025em;
   text-transform:uppercase;max-width:20ch}
.window h2{max-width:28ch}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-top:44px}
.col .yr{font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 800;
         font-size:52px;letter-spacing:-.03em;color:#55605B;line-height:1}
.col.now .yr{color:var(--hivis)}
.col p{margin-top:14px;font-size:16.5px;color:#CBD3D0;max-width:44ch}
.col.now p{color:var(--paper)}

/* ---------- how (live demo) ---------- */
.how{padding:88px 0}
.how .eyebrow{margin-bottom:14px}
.how-sub{margin-top:14px;font-size:16.5px;color:#CBD3D0;max-width:56ch}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:44px;align-items:start}
.how-questions{display:flex;flex-direction:column;gap:10px}
.how-q{text-align:left;background:transparent;color:var(--paper);
  border:1px solid #4A5451;border-radius:8px;padding:14px 16px;cursor:pointer;
  font-family:var(--body);font-size:15px}
.how-q:hover{border-color:var(--hivis)}
.how-q[aria-pressed="true"]{border-color:var(--hivis);background:rgba(255,106,19,.08)}
.how-answer{min-height:120px}
.how-answer .lbl-hi{display:inline-flex;align-items:center;gap:6px}
.how-answer .dot{width:6px;height:6px;border-radius:50%;background:var(--hivis);
  animation:bob 1.3s ease-in-out infinite}
.how-hint{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--chalk)}

/* ---------- close ---------- */
.close{padding:82px 0 96px;text-align:center}
.close h3{font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 800;
          font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;text-transform:uppercase}
.close p{margin:16px auto 30px;max-width:46ch;color:#CBD3D0}
footer{border-top:1px solid #4A5451;padding:22px 0 40px;font-family:var(--mono);font-size:11px;
       letter-spacing:.08em;text-transform:uppercase;color:#7E8A85;
       display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--paper)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:44px;padding:52px 0 70px}
  .cols{grid-template-columns:1fr;gap:36px}
  .how-grid{grid-template-columns:1fr;gap:28px}
  .mast nav{display:none}
  .thread{height:360px;padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){
  .cur,.dots{display:none}
  .thread{height:auto;overflow:visible}
}