/* Bento – the whole page is one continuous bento grid. Prefix: bn- */

:root {
  --bg: #ebebee;
  --tile: #ffffff;
  --ink: #111216;
  --ink-2: #565a63;
  --line: #e1e2e6;
  --accent: #1f4bff;
  --orange: #ff6b2c;
  --cobalt: #1f4bff;
  --black: #111216;
  --soft: #f4f4f6;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gap: 14px;
  --r: 30px;
  --pad: clamp(22px, 2.3vw, 34px);
  --max: 1380px;
}

body.theme-bento { font-size: 1.0625rem; line-height: 1.5; letter-spacing: -0.005em; }
.theme-bento h1, .theme-bento h2, .theme-bento h3 { letter-spacing: -0.035em; font-weight: 700; }
.theme-bento a { text-underline-offset: 0.18em; }

/* ---------- header ---------- */
.bn-top {
  position: sticky;
  top: 10px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--max);
  margin: 10px auto 0;
  padding: 10px 10px 10px 20px;
  width: calc(100% - 2 * var(--gap));
  border-radius: 22px;
  background: rgb(255 255 255 / 0.86);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 8px 30px -18px rgb(0 0 0 / 0.25);
}
.bn-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; min-width: 0; }
.bn-brand__mark { display: grid; grid-template-columns: 9px 9px; gap: 2px; flex: none; }
.bn-brand__mark i { width: 9px; height: 9px; border-radius: 3px; background: var(--orange); }
.bn-brand__mark i:nth-child(2) { background: var(--cobalt); }
.bn-brand__mark i:nth-child(3) { background: var(--black); }
.bn-brand__mark i:nth-child(4) { background: #c9cad0; }
.bn-brand__name { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.04em; }
.bn-brand__sub { font-size: 0.82rem; color: var(--ink-2); white-space: nowrap; }
.bn-nav { display: flex; gap: 4px; margin-left: auto; }
.bn-nav a, .bn-lang {
  padding: 0.55rem 0.95rem;
  border-radius: 14px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.bn-nav a:hover { background: var(--soft); }
.bn-lang { display: inline-flex; gap: 0.4rem; background: var(--black); color: #fff; font-family: var(--font-mono); font-size: 0.85rem; }
.bn-lang span { opacity: 0.5; }
.bn-lang:hover { background: var(--cobalt); }

/* ---------- the grid ---------- */
.bn-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  max-width: var(--max);
  width: calc(100% - 2 * var(--gap));
  margin: var(--gap) auto 0;
}
.bn-group, .bn-steps { display: contents; }
.bn-t {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: var(--pad);
  border-radius: var(--r);
  background: var(--tile);
  scroll-margin-top: 96px;
}
.bn-t p { max-width: 62ch; }
.bn-t h3 { font-size: clamp(1.35rem, 1.7vw, 1.7rem); line-height: 1.08; margin-bottom: 0.55rem; }
.bn-t p + p { margin-top: 0.6rem; }
.bn-small { font-size: 0.875rem; color: var(--ink-2); }
.bn-orange { background: var(--orange); color: var(--ink); }
.bn-cobalt { background: var(--cobalt); color: #fff; }
.bn-black { background: var(--black); color: #fff; }
.bn-black .bn-small, .bn-cobalt .bn-small { color: rgb(255 255 255 / 0.72); }
.bn-black :focus-visible, .bn-cobalt :focus-visible { outline-color: #fff; }

/* desktop placement: 12 columns */
.bn-hero { grid-column: span 8; grid-row: span 2; }
.bn-years { grid-column: span 4; }
.bn-langs, .bn-city { grid-column: span 2; }
.bn-svc-intro { grid-column: span 4; grid-row: span 2; }
.bn-dev { grid-column: span 8; }
.bn-web, .bn-crm, .bn-doc { grid-column: span 4; }
.bn-note { grid-column: span 3; }
.bn-con { grid-column: span 5; grid-row: span 2; }
.bn-coa { grid-column: span 7; }
.bn-app-intro { grid-column: span 5; grid-row: span 2; }
.bn-step1, .bn-step4 { grid-column: span 4; }
.bn-step2, .bn-step3 { grid-column: span 3; }
.bn-small-tile { grid-column: span 5; }
.bn-faq { grid-column: span 7; }
.bn-prod-intro { grid-column: span 3; }
.bn-p1 { grid-column: span 5; }
.bn-p2 { grid-column: span 4; grid-row: span 2; }
.bn-p3 { grid-column: span 8; }
.bn-contact { grid-column: span 8; }
.bn-addr { grid-column: span 4; }

/* ---------- hero group ---------- */
.bn-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(680px, calc(100vh - 120px));
  padding: clamp(28px, 3.6vw, 56px);
  background:
    radial-gradient(120% 90% at 100% 0%, #eef1ff 0%, rgb(238 241 255 / 0) 55%),
    var(--tile);
}
.bn-hero h1 {
  font-size: clamp(3rem, 6.6vw, 6.7rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
  font-weight: 800;
  max-width: 10.5ch;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.bn-hero__lead { font-size: clamp(1.08rem, 1.3vw, 1.28rem); color: var(--ink-2); max-width: 46ch; }
.bn-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.75rem; }
.bn-btn {
  display: inline-flex;
  align-items: center;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  background: var(--black);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s;
}
.bn-btn:hover { background: var(--cobalt); }
.bn-phone { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--line); padding-bottom: 2px; }
.bn-phone:hover { border-color: var(--ink); }
.bn-switch {
  position: absolute;
  top: clamp(28px, 3.6vw, 56px);
  right: clamp(28px, 3.6vw, 56px);
  width: 92px; height: 52px;
  border-radius: 999px;
  background: var(--cobalt);
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.18);
}
.bn-switch i {
  position: absolute; top: 6px; right: 6px;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.25);
}

.bn-years { display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; }
.bn-years__num { font-size: clamp(5rem, 9vw, 9.5rem); font-weight: 800; letter-spacing: -0.07em; line-height: 0.8; }
.bn-years__num sup { font-size: 0.5em; vertical-align: 0.6em; margin-left: 0.04em; }
.bn-years__txt { font-weight: 600; font-size: 1.05rem; max-width: 16ch; padding-right: 110px; box-sizing: content-box; }
.bn-bars { position: absolute; right: var(--pad); bottom: var(--pad); display: flex; align-items: flex-end; gap: 5px; height: 84px; }
.bn-bars i { width: 9px; border-radius: 5px; background: var(--ink); height: 20%; }
.bn-bars i:nth-child(2) { height: 32%; } .bn-bars i:nth-child(3) { height: 44%; }
.bn-bars i:nth-child(4) { height: 56%; } .bn-bars i:nth-child(5) { height: 70%; }
.bn-bars i:nth-child(6) { height: 84%; } .bn-bars i:nth-child(7) { height: 100%; }

.bn-langs, .bn-city { display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; }
.bn-langs__pair { display: flex; margin-bottom: auto; }
.bn-langs__pair span {
  display: grid; place-items: center;
  width: 66px; height: 66px; border-radius: 50%;
  border: 2px solid #fff;
  font-weight: 700; letter-spacing: 0;
}
.bn-langs__pair span + span { margin-left: -16px; background: var(--cobalt); border-color: var(--cobalt); }
.bn-city {
  background:
    radial-gradient(circle, #d5d7dd 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    var(--tile);
}
.bn-city__name { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.03em; }
.bn-pin {
  position: absolute; top: var(--pad); right: var(--pad);
  width: 36px; height: 36px;
  border-radius: 50% 50% 50% 0;
  background: var(--orange);
  transform: rotate(-45deg);
  box-shadow: 0 10px 14px -8px rgb(0 0 0 / 0.4);
}
.bn-pin::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; }

/* ---------- section intro tiles ---------- */
.bn-intro h2 {
  font-size: clamp(2.5rem, 4.4vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-weight: 800;
  margin-bottom: 1rem;
}
.bn-intro p { color: var(--ink-2); font-size: 1.08rem; }
.bn-svc-intro { display: flex; flex-direction: column; }
.bn-trio { display: flex; margin-top: auto; padding-top: 2rem; }
.bn-trio i { width: 86px; height: 86px; border-radius: 50%; background: var(--orange); mix-blend-mode: multiply; }
.bn-trio i:nth-child(2) { background: var(--cobalt); margin-left: -26px; }
.bn-trio i:nth-child(3) { background: var(--black); margin-left: -26px; }

/* ---------- services ---------- */
.bn-dev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.bn-dev h3 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
.bn-dev__focus { font-size: 0.92rem; font-weight: 600; margin-top: 1rem !important; padding-top: 1rem; border-top: 1px solid var(--line); }
.bn-code {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px 22px;
  border-radius: 18px;
  background: #16171c;
  box-shadow: 0 24px 40px -26px rgb(0 0 0 / 0.6);
}
.bn-code__bar { display: flex; gap: 6px; margin-bottom: 6px; }
.bn-code__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3c45; }
.bn-code__bar i:first-child { background: var(--orange); }
.bn-code__l { display: flex; gap: 8px; }
.bn-code__l b { height: 9px; border-radius: 5px; background: #4a4d58; flex: 1; }
.bn-code__l b.bn-k { background: #7f97ff; flex: 0.6; }
.bn-code__l b.bn-s { background: var(--orange); flex: 0.8; }
.bn-w3 { width: 30%; } .bn-w4 { width: 40%; } .bn-w5 { width: 50%; } .bn-w6 { width: 60%; } .bn-w7 { width: 70%; } .bn-w8 { width: 80%; }
.bn-in { margin-left: 8%; } .bn-in2 { margin-left: 16%; }
.bn-code__ok { align-self: flex-start; margin-top: 8px; padding: 4px 10px; border-radius: 8px; background: #262833; color: #c9d3ff; font-family: var(--font-mono); font-size: 0.75rem; }

.bn-focus { display: flex; flex-direction: column; min-height: 300px; }
.bn-focus p { color: var(--ink-2); }
.bn-focus > span:first-child { margin-bottom: auto; padding-bottom: 1.5rem; }
.bn-browser { display: block; width: min(100%, 230px); border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--soft); }
.bn-browser__bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; background: #fff; border-bottom: 1.5px solid var(--line); }
.bn-browser__bar i { width: 7px; height: 7px; border-radius: 50%; background: #d3d4da; }
.bn-browser__bar b { flex: 1; height: 10px; margin-left: 8px; border-radius: 5px; background: var(--soft); }
.bn-browser__hero { display: block; height: 46px; margin: 10px; border-radius: 8px; background: linear-gradient(120deg, var(--cobalt), #6f86ff); }
.bn-browser__cols { display: flex; gap: 6px; margin: 0 10px 10px; }
.bn-browser__cols i { flex: 1; height: 26px; border-radius: 6px; background: #fff; }
.bn-cards { display: block; position: relative; height: 120px; }
.bn-cards i {
  position: absolute; left: 0; display: flex; align-items: center; gap: 10px;
  width: min(100%, 220px); height: 44px; padding: 0 12px;
  border-radius: 12px; background: #fff; border: 1.5px solid var(--line);
  box-shadow: 0 10px 20px -16px rgb(0 0 0 / 0.5);
}
.bn-cards i::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); flex: none; }
.bn-cards i b { flex: 1; height: 8px; border-radius: 4px; background: #d9dae0; }
.bn-cards i:nth-child(1) { top: 0; }
.bn-cards i:nth-child(2) { top: 36px; left: 18px; }
.bn-cards i:nth-child(2)::before { background: var(--cobalt); }
.bn-cards i:nth-child(3) { top: 72px; left: 36px; }
.bn-cards i:nth-child(3)::before { background: var(--black); }
.bn-docs { display: block; position: relative; height: 120px; }
.bn-docs i {
  position: absolute; top: 4px; left: 10px; width: 84px; height: 108px;
  border-radius: 8px; border: 1.5px solid var(--line); background: #fff;
  background-image: repeating-linear-gradient(#fff 0 14px, #e3e4e9 14px 16px);
  background-clip: content-box; padding: 18px 12px;
}
.bn-docs i:nth-child(1) { transform: rotate(-9deg); }
.bn-docs i:nth-child(2) { left: 46px; transform: rotate(3deg); }
.bn-docs i:nth-child(3) { left: 84px; transform: rotate(12deg); border-color: var(--cobalt); }
.bn-docs i:nth-child(3)::after { content: ""; position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); }

.bn-note { display: flex; flex-direction: column; gap: 1rem; min-height: 300px; }
.bn-note p:nth-child(2) { margin-top: auto; }
.bn-prompt { font-family: var(--font-mono); font-size: 0.95rem; color: #c9d3ff; }
.bn-prompt span { color: var(--orange); }
.bn-prompt b { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 4px; vertical-align: -0.15em; background: #fff; }
.bn-os { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0 !important; }
.bn-os span { padding: 4px 10px; border-radius: 8px; border: 1px solid rgb(255 255 255 / 0.3); font-family: var(--font-mono); font-size: 0.75rem; }

.bn-con { display: flex; flex-direction: column; }
.bn-con h3 { font-size: clamp(2rem, 3vw, 3rem); margin-top: auto; }
.bn-chart { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin-bottom: 2rem; }
.bn-chart i { width: 22px; border-radius: 6px 6px 3px 3px; background: rgb(255 255 255 / 0.35); height: 30%; }
.bn-chart i:nth-child(2) { height: 45%; } .bn-chart i:nth-child(3) { height: 38%; }
.bn-chart i:nth-child(4) { height: 70%; } .bn-chart i:nth-child(5) { height: 100%; background: #fff; }
.bn-list { margin-top: 1.25rem; display: grid; gap: 0; }
.bn-list li { padding: 0.7rem 0; border-top: 1px solid var(--line); font-weight: 500; }
.bn-cobalt .bn-list li { border-color: rgb(255 255 255 / 0.28); }
.bn-coa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.bn-coa p { color: var(--ink-2); }
.bn-bubbles { position: relative; width: 170px; height: 150px; }
.bn-bubbles i { position: absolute; border-radius: 26px 26px 26px 6px; background: var(--soft); }
.bn-bubbles i:nth-child(1) { left: 0; top: 0; width: 120px; height: 64px; background: var(--orange); }
.bn-bubbles i:nth-child(2) { right: 0; top: 50px; width: 120px; height: 64px; border-radius: 26px 26px 6px 26px; background: var(--cobalt); }
.bn-bubbles i:nth-child(3) { left: 20px; top: 104px; width: 70px; height: 40px; background: var(--black); }

/* ---------- approach ---------- */
.bn-app-intro { display: flex; flex-direction: column; }
.bn-ring {
  position: relative;
  align-self: flex-start;
  display: grid; place-items: center;
  width: clamp(150px, 15vw, 210px); aspect-ratio: 1;
  margin-top: auto;
  padding-top: 0;
}
.bn-app-intro .bn-ring { margin-top: auto; }
.bn-app-intro p { margin-bottom: 2rem; }
.bn-ring::before {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--orange) 0 88deg, transparent 88deg 92deg, var(--cobalt) 92deg 178deg, transparent 178deg 182deg, var(--black) 182deg 268deg, transparent 268deg 272deg, #c9cad0 272deg 358deg, transparent 358deg);
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 58%);
  mask: radial-gradient(circle, transparent 57%, #000 58%);
}
.bn-ring span { font-family: var(--font-mono); font-size: 1.1rem; }

.bn-step { display: flex; flex-direction: column; min-height: 250px; }
.bn-step__n { font-size: clamp(3rem, 4.6vw, 4.6rem); font-weight: 800; letter-spacing: -0.06em; line-height: 0.85; margin-bottom: auto; padding-bottom: 1.5rem; color: var(--orange); }
.bn-step2 .bn-step__n { color: var(--cobalt); }
.bn-step3 .bn-step__n { color: var(--ink); }
.bn-step4 .bn-step__n { color: #fff; }
.bn-step p { color: var(--ink-2); font-size: 0.98rem; }
.bn-step4 p { color: rgb(255 255 255 / 0.75); }
.bn-meter { display: block; height: 6px; margin-top: 1.25rem; border-radius: 3px; background: var(--soft); overflow: hidden; }
.bn-meter i { display: block; height: 100%; width: 25%; border-radius: 3px; background: var(--orange); }
.bn-step2 .bn-meter i { width: 50%; background: var(--cobalt); }
.bn-step3 .bn-meter i { width: 75%; background: var(--ink); }
.bn-step4 .bn-meter { background: rgb(255 255 255 / 0.18); }
.bn-step4 .bn-meter i { width: 100%; background: #fff; }

.bn-small-tile h3 { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: 1rem; max-width: 9ch; }
.bn-small-tile h3 + p { margin-top: 2.5rem; }
.bn-small-tile { padding-top: calc(var(--pad) + 8px); }
.bn-small-tile p { font-weight: 500; }
.bn-net { position: absolute; top: var(--pad); right: var(--pad); width: 120px; height: 120px; }
.bn-net i { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); background: var(--orange); }
.bn-net i:nth-child(1) { left: 52px; top: 0; } .bn-net i:nth-child(2) { right: 0; top: 40px; }
.bn-net i:nth-child(3) { right: 16px; bottom: 6px; } .bn-net i:nth-child(4) { left: 14px; bottom: 6px; }
.bn-net i:nth-child(5) { left: 0; top: 40px; }
.bn-net b { position: absolute; left: 44px; top: 44px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 10px rgb(17 18 22 / 0.12); }
.bn-net::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  border: 2px dashed rgb(17 18 22 / 0.45);
}

.bn-faq__title { font-size: clamp(1.6rem, 2.2vw, 2.1rem) !important; margin-bottom: 0.75rem !important; }
.bn-faq details { border-top: 1px solid var(--line); }
.bn-faq details:last-child { border-bottom: 1px solid var(--line); }
.bn-faq summary {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1rem 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.05rem;
}
.bn-faq summary::-webkit-details-marker { display: none; }
.bn-faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--soft); font-size: 1.2rem; font-weight: 500;
  transition: transform 0.2s, background-color 0.2s;
}
.bn-faq details[open] summary::after { transform: rotate(45deg); background: var(--orange); }
.bn-faq summary:hover::after { background: #e2e3e8; }
.bn-faq details p { padding: 0 3rem 1.1rem 0; color: var(--ink-2); }

/* ---------- products ---------- */
.bn-prod { display: flex; flex-direction: column; }
.bn-prod p { font-size: 0.98rem; }
.bn-meta { font-size: 0.875rem !important; font-weight: 600; margin-top: auto !important; padding-top: 1rem; }
.bn-link {
  align-self: flex-start;
  margin-top: 0.9rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--soft);
  font-weight: 600; font-size: 0.95rem;
  text-decoration: none;
}
.bn-link:hover { background: var(--ink); color: #fff; }
.bn-cobalt .bn-link, .bn-orange .bn-link { background: #fff; color: var(--ink); }
.bn-cobalt .bn-link:hover, .bn-orange .bn-link:hover { background: var(--ink); color: #fff; }
.bn-p1 p:not(.bn-meta) { color: var(--ink-2); }
.bn-ph { margin-bottom: 1.75rem; padding: 16px 18px; border-radius: 18px; background: var(--soft); }
.bn-ph__val { display: block; font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 12px; }
.bn-ph__val sub { font-size: 0.55em; }
.bn-ph__scale { position: relative; display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #ff6b2c, #ffc23d 35%, #b8c7ff 60%, #1f4bff); }
.bn-ph__scale i { position: absolute; left: 61%; top: -6px; width: 6px; height: 24px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 3px #fff; }
.bn-ph__ticks { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-2); }
.bn-ph__ticks b { font-weight: 400; }
.bn-prod-intro { display: flex; flex-direction: column; justify-content: flex-end; }
.bn-apps { display: flex; gap: 10px; margin-bottom: auto; padding-bottom: 2rem; }
.bn-apps i { width: 58px; height: 58px; border-radius: 17px; background: linear-gradient(160deg, #3c63ff, var(--cobalt)); box-shadow: 0 12px 18px -12px rgb(0 0 0 / 0.5); position: relative; }
.bn-apps i::after { content: ""; position: absolute; inset: 17px; border-radius: 50%; border: 3px solid #fff; }
.bn-apps i:nth-child(2) { background: linear-gradient(160deg, #ff8a55, var(--orange)); transform: translateY(14px); }
.bn-apps i:nth-child(2)::after { inset: 18px 14px; border-radius: 4px; }
.bn-apps i:nth-child(3) { background: var(--black); transform: translateY(28px); }
.bn-apps i:nth-child(3)::after { border-radius: 50% 50% 4px 4px; inset: 16px 18px 20px; }
.bn-prod-intro h2 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); }

.bn-phone-ui {
  display: flex; flex-direction: column; gap: 8px;
  width: 170px; height: 250px; margin: 0 auto 1.75rem;
  padding: 26px 12px 12px;
  border-radius: 28px;
  background: #fff;
  border: 6px solid #0d1a66;
  box-shadow: 0 30px 40px -28px rgb(0 0 0 / 0.7);
  position: relative;
}
.bn-phone-ui::before { content: ""; position: absolute; top: 8px; left: 50%; width: 46px; height: 8px; margin-left: -23px; border-radius: 4px; background: #0d1a66; }
.bn-phone-ui__search { height: 22px; border-radius: 11px; background: var(--soft); }
.bn-phone-ui i { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border-radius: 10px; background: var(--soft); }
.bn-phone-ui i::before { content: ""; width: 18px; height: 18px; border-radius: 6px; background: var(--cobalt); flex: none; }
.bn-phone-ui i:nth-of-type(2)::before { background: var(--orange); }
.bn-phone-ui i b { flex: 1; height: 7px; border-radius: 4px; background: #d3d5dc; }
.bn-phone-ui i::after { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #c3c5cc; }
.bn-phone-ui i:nth-of-type(2)::after { background: var(--orange); border-color: var(--orange); }

.bn-p3 { flex-direction: row; gap: clamp(20px, 3vw, 44px); align-items: stretch; }
.bn-p3__text { display: flex; flex-direction: column; flex: 1; }
.bn-order {
  flex: none; align-self: center;
  display: flex; flex-direction: column; gap: 8px;
  width: 230px; padding: 16px;
  border-radius: 18px; background: #fff;
  box-shadow: 0 24px 40px -26px rgb(0 0 0 / 0.55);
  transform: rotate(3deg);
}
.bn-order__row { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed #d8d9de; }
.bn-order__row i { flex: 1; height: 8px; border-radius: 4px; background: #d8d9de; }
.bn-order__row b { font-family: var(--font-mono); font-weight: 400; font-size: 0.8rem; }
.bn-order__track { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; position: relative; }
.bn-order__track::before { content: ""; position: absolute; left: 6px; right: 6px; height: 3px; background: linear-gradient(90deg, var(--ink) 55%, #d8d9de 55%); }
.bn-order__track i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
.bn-order__track i:last-child { background: #fff; border: 3px solid #d8d9de; }

/* ---------- contact ---------- */
.bn-contact { padding: clamp(28px, 3.6vw, 56px); }
.bn-contact h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); line-height: 0.95; letter-spacing: -0.05em; font-weight: 800; max-width: 13ch; margin-bottom: 1.25rem; }
.bn-contact__lead { color: rgb(255 255 255 / 0.75); font-size: 1.1rem; max-width: 50ch; }
.bn-contact__dl { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; gap: 1.5rem 3rem; margin-top: 2.25rem; }
.bn-contact__dl dt { font-size: 0.85rem; color: rgb(255 255 255 / 0.6); margin-bottom: 0.25rem; }
.bn-contact__dl dd { font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 600; letter-spacing: -0.03em; }
.bn-contact__dl a { text-decoration: none; background: linear-gradient(var(--orange), var(--orange)) 0 100% / 100% 3px no-repeat; padding-bottom: 4px; }
.bn-contact__dl a:hover { color: var(--orange); }
.bn-addr { display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; }
.bn-addr address { font-weight: 500; line-height: 1.45; }
.bn-addr .bn-small { margin-bottom: 0.35rem; }
.bn-map {
  position: absolute; inset: 0 0 46% 0;
  background:
    linear-gradient(90deg, transparent 0 30%, #fff 30% calc(30% + 10px), transparent 0) ,
    linear-gradient(0deg, transparent 0 55%, #fff 55% calc(55% + 8px), transparent 0),
    linear-gradient(115deg, transparent 0 62%, #fff 62% calc(62% + 12px), transparent 0),
    linear-gradient(25deg, transparent 0 20%, #fff 20% calc(20% + 6px), transparent 0),
    #e4e6ec;
  -webkit-mask: linear-gradient(#000 60%, transparent);
  mask: linear-gradient(#000 60%, transparent);
}
.bn-map i { position: absolute; border-radius: 8px; background: #d4d7df; }
.bn-map i:nth-child(1) { left: 6%; top: 12%; width: 18%; height: 30%; }
.bn-map i:nth-child(2) { left: 38%; top: 8%; width: 22%; height: 36%; background: #cfd6f6; }
.bn-map i:nth-child(3) { left: 70%; top: 14%; width: 24%; height: 28%; }
.bn-map i:nth-child(4) { left: 8%; top: 66%; width: 16%; height: 24%; }
.bn-map b {
  position: absolute; left: 48%; top: 34%;
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0;
  background: var(--cobalt); transform: rotate(-45deg);
  box-shadow: 0 0 0 6px rgb(31 75 255 / 0.18);
}

/* ---------- footer ---------- */
.bn-foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  max-width: var(--max);
  width: calc(100% - 2 * var(--gap));
  margin: var(--gap) auto var(--gap);
}
.bn-foot__tile { padding: var(--pad); border-radius: var(--r); background: var(--tile); font-size: 0.92rem; }
.bn-foot__brand { grid-column: span 6; display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.bn-foot__brand p:last-child { color: var(--ink-2); }
.bn-foot__name { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 800; letter-spacing: -0.06em; line-height: 0.85; }
.bn-foot__links { grid-column: span 3; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3rem; }
.bn-foot__links a { font-weight: 600; text-decoration: none; }
.bn-foot__links a:hover { text-decoration: underline; }
.bn-foot__copy { grid-column: span 3; display: flex; flex-direction: column; justify-content: flex-end; background: var(--soft); color: var(--ink-2); box-shadow: inset 0 0 0 1px #dcdde2; }

/* ---------- legal pages ---------- */
.theme-bento .legal { padding: var(--gap) 0 0; }
.theme-bento .legal__inner {
  max-width: var(--max);
  width: calc(100% - 2 * var(--gap));
  padding: clamp(28px, 6vw, 96px) max(var(--pad), calc((100% - 46rem) / 2));
  border-radius: var(--r);
  background: var(--tile);
}
.theme-bento .legal h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; }
.theme-bento .legal h2 { font-weight: 700; letter-spacing: -0.03em; font-size: 1.35rem; }
.theme-bento .legal a { color: var(--cobalt); }

/* ---------- 2 columns ---------- */
@media (max-width: 1100px) {
  .bn-grid, .bn-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-grid > * , .bn-t { grid-column: span 1; grid-row: auto; }
  .bn-hero, .bn-svc-intro, .bn-dev, .bn-app-intro, .bn-contact, .bn-addr { grid-column: span 2; }
  .bn-p3 { flex-direction: column; }
  .bn-order { order: -1; align-self: flex-start; margin: 0.5rem 0 1.75rem 8px; }
  .bn-hero { min-height: 0; padding-top: 120px; }
  .bn-years { grid-row: span 2; }
  .bn-langs, .bn-city, .bn-web, .bn-crm, .bn-doc, .bn-note, .bn-con, .bn-coa,
  .bn-step1, .bn-step2, .bn-step3, .bn-step4, .bn-small-tile, .bn-faq,
  .bn-prod-intro, .bn-p1, .bn-p2 { grid-column: span 1; grid-row: auto; }
  .bn-svc-intro, .bn-app-intro { grid-row: auto; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 2rem; align-items: end; }
  .bn-svc-intro h2, .bn-app-intro h2 { grid-column: 1 / -1; }
  .bn-trio, .bn-app-intro .bn-ring { grid-column: 2; grid-row: 2; justify-self: end; margin: 0; padding: 0; }
  .bn-app-intro p { margin-bottom: 0; }
  .bn-coa { grid-template-columns: 1fr; }
  .bn-bubbles { display: none; }
  .bn-addr { min-height: 260px; padding-left: 45%; }
  .bn-map { inset: 0 auto 0 0; width: 40%; -webkit-mask: linear-gradient(90deg, #000 60%, transparent); mask: linear-gradient(90deg, #000 60%, transparent); }
  .bn-foot__brand { grid-column: span 2; }
  .bn-foot__links, .bn-foot__copy { grid-column: span 1; }
}

/* ---------- header + 1 column ---------- */
@media (max-width: 860px) {
  .bn-top { position: static; flex-wrap: wrap; gap: 0.5rem; padding: 12px; }
  .bn-brand { flex: 1; }
  .bn-nav { order: 3; width: 100%; margin: 0; flex-wrap: wrap; }
  .bn-nav a { padding: 0.45rem 0.7rem; background: var(--soft); font-size: 0.9rem; }
}
@media (max-width: 680px) {
  :root { --gap: 10px; --r: 24px; --pad: 22px; }
  .bn-grid, .bn-foot { grid-template-columns: minmax(0, 1fr); }
  .bn-grid > *, .bn-t, .bn-hero, .bn-svc-intro, .bn-dev, .bn-app-intro, .bn-contact, .bn-addr, .bn-p3,
  .bn-foot__brand, .bn-foot__links, .bn-foot__copy { grid-column: auto; grid-row: auto; }
  .bn-brand__sub { white-space: normal; font-size: 0.75rem; line-height: 1.2; }
  .bn-hero { padding: 96px 22px 26px; }
  .bn-switch { top: 22px; right: 22px; width: 72px; height: 40px; }
  .bn-switch i { width: 30px; height: 30px; top: 5px; right: 5px; }
  .bn-years { min-height: 220px; }
  .bn-langs, .bn-city { min-height: 160px; }
  .bn-svc-intro, .bn-app-intro { display: flex; align-items: stretch; }
  .bn-trio, .bn-app-intro .bn-ring { align-self: flex-start; }
  .bn-focus > span:first-child { padding-bottom: 1.25rem; }
  .bn-trio { margin-top: 1.5rem; }
  .bn-app-intro .bn-ring { margin-top: 0; width: 140px; }
  .bn-dev { grid-template-columns: 1fr; }
  .bn-t p, .bn-list li { hyphens: auto; -webkit-hyphens: auto; }
  .bn-focus, .bn-note, .bn-step { min-height: 0; }
  .bn-focus > span:first-child { margin-bottom: 0; }
  .bn-p3 { flex-direction: column; }
  .bn-order { align-self: flex-start; margin: 0.5rem 0 0.5rem 6px; }
  .bn-net { width: 90px; height: 90px; transform: scale(0.75); transform-origin: top right; }
  .bn-small-tile h3 { margin-top: 70px; }
  .bn-contact__dl { grid-template-columns: 1fr; }
  .bn-contact__dl dd { font-size: 1.2rem; }
  .bn-addr { padding-left: var(--pad); padding-top: 170px; }
  .bn-map { inset: 0 0 auto 0; width: auto; height: 170px; -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); }
  .bn-faq details p { padding-right: 0; }
  .bn-foot__brand { align-items: flex-start; flex-direction: column; gap: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bn-btn, .bn-faq summary::after { transition: none; }
}