/* Home: Tree Capital Technologies and ANVEN */

/* ---------------------------------------------------------------- hero */
.home-hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 104px); }
/* tree rings, centred behind the mark */
.home-hero__grain {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 74% 46%, transparent 0 38px, rgba(246, 240, 248, .045) 38px 39px),
    radial-gradient(circle at 74% 46%, rgba(174, 68, 90, .28), transparent 42%);
  mask-image: radial-gradient(circle at 74% 46%, #000 0 34%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 74% 46%, #000 0 34%, transparent 68%);
}
.home-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.home-hero__copy { display: grid; gap: 24px; align-content: center; }
.home-hero__by { font: 500 1rem/1.3 var(--font-display); color: var(--peach-2); letter-spacing: .01em; }
.home-hero h1 { font-size: clamp(2.8rem, 5.3vw, 4.9rem); line-height: .96; letter-spacing: -.03em; }
.home-hero .lede { max-width: 34rem; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.proof { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; }
.proof li { display: grid; gap: 2px; padding: 4px 26px 4px 0; margin-right: 26px; border-right: 1px solid var(--on-dark-rule); }
.proof li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.proof b { font: 500 1.625rem/1.1 var(--font-display); color: #fff; letter-spacing: -.01em; }
.proof span { font-size: .875rem; color: var(--on-dark-3); }

.hero-status { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--on-dark-3); }
.hero-status[data-state="live"] .gpu__dot { background: #2fbf74; box-shadow: 0 0 0 4px rgba(47, 191, 116, .18); }
.hero-status[data-state="offline"] .gpu__dot { background: var(--peach); box-shadow: 0 0 0 4px rgba(243, 159, 90, .2); }

/* the mark as four capability tabs */
.core { display: grid; gap: 22px; justify-items: center; }
.core__stage { position: relative; width: min(440px, 100%); aspect-ratio: 1; }
/* the mark sits on a light disc, as the logo does on paper, so its four colours read on the dark hero */
.core__stage::before {
  content: ""; position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #efe8f2 72%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 10px rgba(246, 240, 248, .05);
}
.core__svg { position: absolute; inset: 22%; width: 56%; height: 56%; overflow: visible; }
.core__piece { cursor: pointer; transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, filter .35s ease; }
.core[data-cap] .core__piece { opacity: .3; }
.core[data-cap] .core__piece.on { opacity: 1; transform: translate(var(--dx), var(--dy)); filter: drop-shadow(0 5px 8px rgba(29, 10, 37, .3)); }
.core[data-cap] .core__piece:not(.on):hover { opacity: .6; }

.core__orbit { position: absolute; inset: 6%; border-radius: 50%; border: 1px dashed rgba(246, 240, 248, .16); animation: orbit 48s linear infinite; }
.core__orbit i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.core__orbit i:nth-child(odd) { border-radius: 2px; background: var(--peach); }      /* visual tokens */
.core__orbit i:nth-child(even) { border-radius: 50%; background: var(--on-dark-2); }  /* text tokens */
.core__orbit i:nth-child(1) { left: 50%; top: 0; }
.core__orbit i:nth-child(2) { left: 93.3%; top: 25%; }
.core__orbit i:nth-child(3) { left: 93.3%; top: 75%; }
.core__orbit i:nth-child(4) { left: 50%; top: 100%; }
.core__orbit i:nth-child(5) { left: 6.7%; top: 75%; }
.core__orbit i:nth-child(6) { left: 6.7%; top: 25%; }
@keyframes orbit { to { transform: rotate(360deg); } }

.core__tabs { position: absolute; inset: 0; }
.core__tab {
  position: absolute; display: inline-flex; align-items: center; gap: 9px; overflow: hidden;
  padding: 9px 15px; border-radius: 14px 4px 14px 4px; border: 1px solid rgba(246, 240, 248, .18);
  background: rgba(29, 10, 37, .72); color: var(--on-dark-2); font: 700 .875rem/1 var(--font-text); cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .2s, color .2s, border-color .2s;
}
.core__tab:hover { color: #fff; border-color: rgba(246, 240, 248, .4); }
.core__tab[aria-selected="true"] { background: #fff; color: var(--night); border-color: #fff; }
.core__tab--0 { left: 0; top: 4%; }
.core__tab--1 { right: 0; top: 4%; }
.core__tab--2 { left: 0; bottom: 4%; }
.core__tab--3 { right: 0; bottom: 4%; }
.core__swatch { width: 10px; height: 10px; border-radius: 6px 2px 6px 2px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); }
.core__timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--rose); }
.core.ticking .core__tab[aria-selected="true"] .core__timer { animation: tick 6s linear forwards; }
@keyframes tick { to { width: 100%; } }

.core__panel {
  width: min(520px, 100%); min-height: 214px; display: grid; gap: 12px; align-content: start;
  padding: 22px 24px; border-radius: var(--petal); border: 1px solid var(--on-dark-rule); background: rgba(255, 255, 255, .05);
}
.core__panel-head { display: flex; align-items: center; gap: 14px; }
.core__panel p { color: var(--on-dark-2); font-size: 1rem; }
.core__panel .btn { justify-self: start; }
.core__gain { display: flex; gap: 10px; align-items: flex-start; }
.core__gain .ico { color: var(--peach); margin-top: 3px; }
.core__gain span { color: #fff; }

/* ---------------------------------------------------------------- company */
.company__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.company__grid h2 { margin-bottom: 20px; }
.company__p { margin-top: 18px; color: var(--ink-2); max-width: 40rem; }
.company__side { display: grid; gap: 24px; }
.co-facts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--sheet); border-radius: var(--petal); box-shadow: var(--shadow-lift); overflow: hidden; }
.co-facts div { padding: 20px 22px; display: grid; gap: 4px; align-content: start; border-bottom: 1px solid var(--rule); }
.co-facts div:nth-child(odd) { border-right: 1px solid var(--rule); }
.co-facts div:nth-last-child(-n+2) { border-bottom: 0; }
.co-facts dt { font-size: .8125rem; font-weight: 700; color: var(--ink-3); }
.co-facts dd { margin: 0; font: 500 2rem/1.05 var(--font-display); color: var(--aubergine); letter-spacing: -.02em; }
.co-facts span { font-size: .8125rem; color: var(--ink-3); }
.offices { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.offices li { display: flex; gap: 12px; align-items: flex-start; font-size: .875rem; color: var(--ink-3); }
.offices li .ico { color: var(--rose); margin-top: 2px; }
.offices b { display: block; color: var(--ink); font-size: .9375rem; }

/* ---------------------------------------------------------------- ANVEN */
.family { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.family__item { display: grid; gap: 12px; align-content: start; padding: 24px; background: var(--paper); border-radius: var(--petal-md); }
.family__item p { font-size: .9375rem; color: var(--ink-2); }
.family__live { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--petal-md); }
.family__live-k { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; color: var(--peach-2); }
.family__live-k .ico { width: .8em; height: .8em; }
.family__live h3 { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 400; overflow-wrap: anywhere; }
.family__live dl { margin: 4px 0 0; display: grid; gap: 8px; }
.family__live dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--on-dark-rule); font-size: .875rem; }
.family__live dt { color: var(--on-dark-3); }
.family__live dd { margin: 0; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

.arch { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.arch__intro { display: grid; gap: 14px; align-content: start; }
.arch__detail { margin-top: 10px; padding: 20px 22px; border-radius: var(--petal-md); background: var(--paper); min-height: 132px; display: grid; gap: 8px; align-content: start; }
.arch__detail h4 { display: flex; align-items: center; gap: 10px; color: var(--aubergine); }
.arch__detail p { font-size: .9375rem; color: var(--ink-2); }
.arch__stack { position: relative; display: grid; gap: 10px; padding: 34px 22px 22px 46px; border: 1.5px dashed var(--rule-strong); border-radius: var(--petal); }
.arch__fence { position: absolute; top: -12px; left: 22px; display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--rule-strong); font-size: .8125rem; font-weight: 700; color: var(--ink-2); }
.arch__layer {
  display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.6fr); align-items: center; gap: 14px; text-align: left;
  padding: 14px 16px; border-radius: var(--petal-sm); border: 1px solid var(--rule); background: var(--paper); cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.arch__layer:hover { border-color: var(--rule-strong); transform: translateX(3px); }
.arch__name { display: flex; align-items: center; gap: 10px; font: 500 1rem/1.2 var(--font-display); color: var(--ink); }
.arch__name .ico { color: var(--rose); }
.arch__items { display: flex; flex-wrap: wrap; gap: 6px; }
.arch__items span { padding: 3px 10px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--rule); font-size: .8125rem; color: var(--ink-2); }
.arch__layer--core { border-color: rgba(243, 159, 90, .7); box-shadow: inset 4px 0 0 var(--peach); }
.arch__layer[aria-pressed="true"] { background: var(--aubergine); border-color: var(--aubergine); transform: none; }
.arch__layer[aria-pressed="true"] .arch__name { color: #fff; }
.arch__layer[aria-pressed="true"] .arch__name .ico { color: var(--peach); }
.arch__layer[aria-pressed="true"] .arch__items span { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); color: var(--on-dark); }
/* data rising from your systems to the people using it */
.arch__pulse { position: absolute; left: 20px; top: 36px; bottom: 24px; width: 2px; background: var(--rule); border-radius: 2px; }
.arch__pulse i { position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 2px; background: var(--peach); animation: rise 4.8s linear infinite; opacity: 0; }
.arch__pulse i:nth-child(2) { animation-delay: 1.6s; background: var(--rose); border-radius: 50%; }
.arch__pulse i:nth-child(3) { animation-delay: 3.2s; }
@keyframes rise { 0% { top: 100%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 0; opacity: 0; } }

/* ---------------------------------------------------------------- services */
.svc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.svc__list { display: grid; gap: 8px; }
.svc__list button {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; text-align: left; border: 1px solid transparent;
  border-radius: var(--petal-md); background: transparent; font: 500 1.0625rem/1.25 var(--font-display); color: var(--ink-2); cursor: pointer;
}
.svc__list button:hover { background: var(--sheet); color: var(--ink); }
.svc__list button[aria-selected="true"] { background: var(--sheet); color: var(--aubergine); border-color: var(--rule); box-shadow: var(--shadow-lift); }
.svc__list button[aria-selected="true"] .leaf-ico { background: var(--aubergine); color: var(--peach); }
.svc__chev { margin-left: auto; color: var(--ink-3); }
.svc__panel { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 36px); background: var(--sheet); border-radius: var(--petal); min-height: 320px; }
.svc__panel p { color: var(--ink-2); max-width: 36rem; }
.leaf-ico--lg { width: 56px; height: 56px; border-radius: 20px 5px 20px 5px; background: var(--aubergine); color: var(--peach); }
.leaf-ico--lg .ico { width: 26px; height: 26px; }
.tags { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--paper); font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.tags .ico { color: var(--rose); width: 1em; height: 1em; }

/* ---------------------------------------------------------------- journey */
.journey__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); height: 10px; margin-bottom: 28px; }
.journey__bar i { border-radius: 6px 2px 6px 2px; }
.doors { padding-bottom: 0; }
.journey__bar i:nth-child(1) { background: var(--wine); }
.journey__bar i:nth-child(2) { background: var(--aubergine); }
.journey__bar i:nth-child(3) { background: var(--rose); }
.journey__bar i:nth-child(4) { background: var(--peach); }
.journey__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); counter-reset: step; }
.journey__steps li { display: grid; gap: 10px; align-content: start; counter-increment: step; }
.journey__steps li::before {
  content: counter(step); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px 3px 12px 3px;
  font: 500 1rem/1 var(--font-display); color: #fff; background: var(--wine);
}
.journey__steps li:nth-child(2)::before { background: var(--aubergine); }
.journey__steps li:nth-child(3)::before { background: var(--rose); }
.journey__steps li:nth-child(4)::before { background: var(--peach); color: var(--night); }
.journey__steps p { font-size: .9375rem; color: var(--ink-2); }
.journey__time { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--wine) !important; }

/* ---------------------------------------------------------------- doors */
.doors__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.door {
  position: relative; display: grid; gap: 14px; align-content: start; padding: clamp(28px, 3.4vw, 44px); min-height: 280px;
  border-radius: var(--petal); text-decoration: none; color: var(--on-dark-2); overflow: hidden; transition: transform .25s ease;
}
.door::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 0 0 0 0; opacity: .9; transition: transform .4s ease; }
.door--chat { background: var(--night); }
.door--chat::after { background: var(--peach); border-radius: 100% 0 100% 0; transform: rotate(0deg); opacity: .16; }
.door--agents { background: var(--aubergine); }
.door--agents::after { background: var(--rose); border-radius: 100% 0 0 0; opacity: .3; }
.door:hover { transform: translateY(-3px); color: var(--on-dark-2); }
.door:hover::after { transform: scale(1.12); }
.door h2 { color: #fff; font-size: clamp(1.4rem, 2.2vw, 1.85rem); max-width: 24rem; }
.door p { max-width: 30rem; }
.door__kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9375rem; color: var(--peach-2); }
.door__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; color: #fff; }
.door__cta .ico { transition: transform .2s; }
.door:hover .door__cta .ico { transform: translateX(4px); }

/* ---------------------------------------------------------------- FAQ */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.faq__grid h2 { position: sticky; top: calc(var(--nav-h) + 24px); }
.faq__list details { border-bottom: 1px solid var(--rule); }
.faq__list details:first-child { border-top: 1px solid var(--rule); }
.faq__list summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font: 500 1.1875rem/1.3 var(--font-display); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__plus { color: var(--rose); transition: transform .25s ease; }
.faq__list details[open] .faq__plus { transform: rotate(45deg); }
.faq__list details p { padding: 0 0 22px; color: var(--ink-2); max-width: 44rem; }

/* ---------------------------------------------------------------- contact */
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.contact__grid h2 { margin-bottom: 18px; }
.contact__ways { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.contact__ways li { display: flex; align-items: center; gap: 12px; }
.contact__ways .ico { color: var(--peach); }
.contact__ways a { color: #fff !important; font-weight: 700; text-decoration: none; }
.contact__ways a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .family { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arch { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .home-hero__grid, .company__grid, .svc, .faq__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero__grain { background-position: 50% 70%; }
  .faq__grid h2 { position: static; }
  .journey__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey__bar { display: none; }
}
@media (max-width: 720px) {
  .doors__grid { grid-template-columns: minmax(0, 1fr); }
  .arch__layer { grid-template-columns: minmax(0, 1fr); }
  .arch__stack { padding-left: 38px; }
  .proof li { padding-right: 16px; margin-right: 16px; }
}
@media (max-width: 560px) {
  .family, .journey__steps, .co-facts { grid-template-columns: minmax(0, 1fr); }
  .co-facts div { border-right: 0 !important; border-bottom: 1px solid var(--rule) !important; }
  .co-facts div:last-child { border-bottom: 0 !important; }
  .core__stage { width: 100%; aspect-ratio: auto; display: grid; gap: 16px; }
  .core__stage::before { display: none; }
  .core__svg { position: relative; inset: auto; width: min(250px, 70%); height: auto; aspect-ratio: 1; margin: 4px auto 6px; padding: 9%;
    border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #efe8f2 72%); box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .55); }
  .core__orbit { display: none; }
  .core__tabs { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .core__tab { position: relative; inset: auto !important; justify-content: flex-start; }
  .proof { gap: 14px 0; }
  .proof li { border-right: 0; margin-right: 0; padding-right: 22px; }
}