/* 499apps home — page-specific styles. Base, header, sections, footer, dock and motion live in site.css. */
.menu-btn { display: none; justify-self: end; align-items: center; gap: 10px; padding: 10px 0 10px 14px; }
.menu-btn i { width: 18px; height: 8px; position: relative; display: block; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-btn i::before { top: 0; } .menu-btn i::after { top: 7px; }
.menu-btn[aria-expanded="true"] i::before { top: 3.5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { top: 3.5px; transform: rotate(-45deg); }

/* mobile menu overlay */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--bg); padding: calc(var(--bar) + 28px) var(--pad) 32px; display: flex; flex-direction: column; justify-content: space-between; visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility 0s .3s; overflow-y: auto; }
.menu.open { visibility: visible; opacity: 1; transition: opacity .3s var(--ease); }
.menu nav { display: contents; }
.menu ol { border-top: 1px solid var(--rule); }
.menu li { border-bottom: 1px solid var(--hair); }
.menu li a { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; font-size: clamp(38px, 11vw, 64px); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.menu li .mono { color: var(--accent); min-width: 24px; letter-spacing: .06em; }
.menu li a:hover, .menu li a:focus-visible { color: var(--accent); }
.menu-ext { display: flex; gap: 24px; margin-top: 28px; color: var(--mute); }
.menu-ext a:hover { color: var(--fg); }

/* hero */
.hero { position: relative; min-height: 100svh; padding: calc(var(--bar) + 56px) var(--pad) 0; display: flex; flex-direction: column; overflow: hidden; }
.hero::after { /* twelve-column hairline grid */
  content: ""; position: absolute; inset: var(--bar) 0 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image: linear-gradient(90deg, var(--hair) 1px, transparent 1px), linear-gradient(var(--hair) 1px, transparent 1px);
  background-size: calc(100% / 12) 120px;
}
.reg { position: absolute; font: 300 22px/1 var(--mono); color: var(--mute); z-index: 1; top: calc(var(--bar) + 14px); }
.reg.tl { left: calc(var(--pad) - 6px); } .reg.tr { right: calc(var(--pad) - 6px); }
.hero h1 { font-size: clamp(46px, 9.1vw, 158px); max-width: 15ch; position: relative; z-index: 2; }
.hero-row { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; margin-top: clamp(28px, 4vw, 56px); position: relative; z-index: 2; }
.lead { max-width: 36ch; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.4; font-weight: 500; letter-spacing: -.01em; }
.actions { display: flex; flex-wrap: wrap; gap: 10px 32px; align-items: flex-start; }
.arrow { display: inline-flex; gap: 14px; align-items: baseline; font-weight: 600; font-size: 17px; border-bottom: 1px solid var(--rule); padding-bottom: 4px; transition: gap .35s var(--ease), color .2s, border-color .2s; }
.arrow i { font-style: normal; transition: transform .35s var(--ease); }
.arrow:hover { color: var(--accent); gap: 22px; border-color: var(--accent); }
.arrow:hover i { transform: translateY(3px); }
.numeral { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; overflow: hidden; pointer-events: none; z-index: 1; }
.numeral span { position: absolute; right: -.5vw; bottom: -.16em; font-weight: 800; color: var(--accent); opacity: .92; font-size: clamp(200px, 31vw, 560px); line-height: .8; letter-spacing: -.075em; will-change: transform; }

/* stats strip (figures unchanged from v1) */
.facts { display: grid; grid-template-columns: 1fr 1fr 2fr; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); position: relative; z-index: 3; background: var(--bg); }
.facts p { display: flex; flex-direction: column; gap: 10px; padding: 22px var(--pad); border-left: 1px solid var(--hair); }
.facts p:first-child { border-left: 0; }
.facts b { font-size: clamp(26px, 3vw, 44px); letter-spacing: -.035em; line-height: 1; font-weight: 700; }
.facts .mono { color: var(--mute); }

/* products */
.rows { border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1fr) 170px; gap: 28px; align-items: center; padding: clamp(24px, 3vw, 44px) 0; border-bottom: 1px solid var(--rule); position: relative; isolation: isolate; transition: color .3s; }
.rows .row:last-child { border-bottom: 0; }
.row::before { content: ""; position: absolute; inset: 0 -20px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); z-index: -1; }
.row:hover::before, .row:focus-visible::before { transform: scaleY(1); }
.row:hover, .row:focus-visible { color: var(--on-accent); }
.row img { width: 56px; height: 56px; border-radius: 12px; display: block; }
.row h3 { font-size: clamp(34px, 5.2vw, 84px); line-height: .95; letter-spacing: -.045em; font-weight: 700; }
.row p { font-size: 16px; line-height: 1.45; max-width: 40ch; }
.row.long h3 { font-size: clamp(34px, 3.4vw, 64px); }
.go { white-space: nowrap; align-self: start; padding-top: 6px; }
.go i { font-style: normal; display: inline-block; transition: transform .35s var(--ease); }
.row:hover .go i { transform: translateX(6px); }

/* focus */
.focus { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.focus li { padding: 26px 28px 40px 0; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 10px; }
.focus li:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--hair); }
.focus .mono { color: var(--accent); margin-bottom: 18px; }
.focus h3 { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; }
.focus p { color: var(--mute); max-width: 34ch; }
.notes { margin-top: 56px; display: grid; grid-template-columns: 140px 1fr; gap: 20px; }
.notes .mono { color: var(--mute); padding-top: 3px; }
.notes li { font: 400 14px/1.45 var(--mono); padding: 6px 0; border-bottom: 1px dashed var(--hair); }
.notes li:last-child { border-bottom: 0; }

/* method */
.method { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.method li { padding: 22px 24px 8px 0; display: flex; flex-direction: column; }
.method li + li { padding-left: 24px; border-left: 1px solid var(--hair); }
.method .n { font-size: clamp(110px, 13vw, 210px); line-height: .85; letter-spacing: -.07em; font-weight: 800; color: var(--accent); margin-bottom: 28px; }
.method h3 { font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -.03em; line-height: 1.05; font-weight: 700; }
.method p { margin-top: 10px; color: var(--mute); max-width: 26ch; }

/* build band */
.dark { background: var(--bg-2); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.dark .big { color: var(--mute); }
.quote { margin-top: clamp(40px, 6vw, 90px); font-size: clamp(44px, 8.2vw, 140px); max-width: 15ch; color: var(--fg); }

/* contact */
.mail { display: inline-block; margin-top: clamp(24px, 3vw, 44px); font-size: clamp(30px, 6.4vw, 108px); font-weight: 700; letter-spacing: -.05em; line-height: 1; border-bottom: .06em solid var(--fg); padding-bottom: .06em; transition: color .25s, border-color .25s; overflow-wrap: anywhere; }
.mail:hover { color: var(--accent); border-color: var(--accent); }


/* narrow screens */
@media (max-width: 900px) {

/* narrow screens */
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .hero { padding-top: calc(var(--bar) + 36px); } .reg { display: none; }
  .hero::after { background-size: calc(100% / 6) 96px; }
  .numeral { height: 36%; } .numeral span { right: -1vw; font-size: 44vw; }
  .facts { grid-template-columns: 1fr 1fr; } .facts .stack { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--hair); }
  .row { grid-template-columns: 56px 1fr; gap: 14px 18px; }
  .row h3 { align-self: center; } .row p, .row .go { grid-column: 1 / -1; }
  .row::before { inset: 0 -12px; }
  .focus { grid-template-columns: 1fr; } .focus li, .focus li:nth-child(even) { padding: 22px 0 28px; border-left: 0; }
  .notes { grid-template-columns: 1fr; gap: 10px; }
  .method { grid-template-columns: 1fr; } .method li, .method li + li { padding: 22px 0 26px; border-left: 0; border-bottom: 1px solid var(--hair); }
  .method .n { font-size: 96px; margin-bottom: 14px; }
}
@media (min-width: 901px) { .menu { display: none; } }
@media (prefers-reduced-motion: reduce) { .numeral span { transform: none !important; } }