/* Bactrian site v2 — brand kit 2026-08-29 (Pitch / Signal / Bone · Archivo + IBM Plex Mono) */
*{box-sizing:border-box}
body{margin:0;background:#080A09;color:#E4E8E1;font-family:'Archivo','Noto Sans SC',sans-serif;-webkit-font-smoothing:antialiased}
a{color:#E4E8E1;text-decoration:none}
a:hover{color:oklch(0.84 0.19 145)}

.bx-nav{display:flex;align-items:center;gap:40px;padding:0 40px;height:64px;border-bottom:1px solid rgba(228,232,225,0.1);position:sticky;top:0;background:rgba(10,10,11,0.85);backdrop-filter:blur(12px);z-index:10}
.bx-nav .links{display:flex;gap:28px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.18em}
.bx-nav .links a{color:#7F8A7C}
.bx-nav .links a.active{color:oklch(0.84 0.19 145)}
.bx-nav .links a:hover{color:#E4E8E1}
.bx-login{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;color:oklch(0.84 0.19 145);border:1px solid oklch(0.84 0.19 145 / 0.4);padding:9px 16px;white-space:nowrap}
.bx-login:hover{background:oklch(0.84 0.19 145 / 0.1);color:oklch(0.84 0.19 145)}

@keyframes bx-drift{from{transform:translateX(0)}to{transform:translateX(-64px)}}
.bx-rulefield{position:absolute;top:0;right:0;bottom:0;width:42%;background:repeating-linear-gradient(90deg, rgba(228,232,225,0.07) 0 1px, transparent 1px 64px);-webkit-mask-image:linear-gradient(90deg, transparent, black 60%);mask-image:linear-gradient(90deg, transparent, black 60%);animation:bx-drift 14s linear infinite;pointer-events:none}
@media (prefers-reduced-motion: reduce){.bx-rulefield{animation:none}}

.bx-tiles{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr}
.bx-tile{display:flex;flex-direction:column;gap:18px;padding:48px 40px 56px;border-right:1px solid rgba(228,232,225,0.1)}
.bx-tile:last-child{border-right:0}
.bx-tile:hover{background:rgba(228,232,225,0.03);color:#E4E8E1}

.bx-svcrow{display:grid;grid-template-columns:64px 320px 1fr;gap:32px;padding:44px 0;border-bottom:1px solid rgba(228,232,225,0.08);align-items:baseline}
.bx-svcrow:last-child{border-bottom:0}

.bx-cta-solid{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.14em;background:oklch(0.84 0.19 145);color:#080A09;padding:15px 26px;font-weight:500}
.bx-cta-solid:hover{background:oklch(0.89 0.18 145);color:#080A09}
.bx-cta-ghost{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.14em;color:#AFB6AA;border:1px solid rgba(228,232,225,0.2);padding:14px 26px}

.bx-pfgrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(228,232,225,0.1);border-left:1px solid rgba(228,232,225,0.1)}
.bx-pfcell{padding:40px 32px;border-right:1px solid rgba(228,232,225,0.1);border-bottom:1px solid rgba(228,232,225,0.1);display:flex;flex-direction:column;gap:10px}
.bx-pfcell:hover{background:rgba(228,232,225,0.03)}

.bx-foot{margin-top:auto;border-top:1px solid rgba(228,232,225,0.1);padding:40px;display:flex;flex-direction:column;gap:14px}

@media (max-width:860px){
  .bx-nav{gap:20px;padding:0 20px}
  .bx-nav .links{gap:16px}
  .bx-tiles{grid-template-columns:1fr}
  .bx-tile{border-right:0;border-bottom:1px solid rgba(228,232,225,0.1)}
  .bx-tile:last-child{border-bottom:0}
  .bx-svcrow{grid-template-columns:40px 1fr}
  .bx-svcrow p{grid-column:2}
  .bx-pfgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.bx-pfgrid{grid-template-columns:1fr}}

.bx-units{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid rgba(228,232,225,0.1)}
.bx-unit{padding:30px 28px;border-right:1px solid rgba(228,232,225,0.1);display:flex;flex-direction:column;gap:12px}
.bx-unit:last-child{border-right:0}
.bx-unit:hover{background:rgba(228,232,225,0.03)}
@media (max-width:860px){
  .bx-units{grid-template-columns:1fr}
  .bx-unit{border-right:0;border-bottom:1px solid rgba(228,232,225,0.1)}
  .bx-unit:last-child{border-bottom:0}
}

/* ================= v2.1 — design background system + motion (2026-08-30) ================= */

/* ---- type: Space Grotesk body, Archivo display (Type doc option 02, built pages of record) ---- */
body{font-family:'Space Grotesk','Noto Sans SC',sans-serif}
[style*="font-stretch"]{font-family:'Archivo','Noto Sans SC',sans-serif}

/* ---- keyframes ---- */
@keyframes bx-drift{from{transform:translateX(0)}to{transform:translateX(-64px)}}
@keyframes bx-driftslow{from{transform:translateX(0)}to{transform:translateX(-160px)}}
@keyframes bx-driftup{from{transform:translateY(0)}to{transform:translateY(-96px)}}
@keyframes bx-draw{from{stroke-dashoffset:2000}to{stroke-dashoffset:0}}
@keyframes bx-drawmark{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
@keyframes bx-rise{from{opacity:0;transform:translateY(0.5em)}to{opacity:1;transform:translateY(0)}}
@keyframes bx-fade{from{opacity:0}to{opacity:1}}
@keyframes bx-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bx-breathe{0%,100%{opacity:0.3}50%{opacity:0.8}}
@keyframes bx-scan{from{transform:translateY(-14%)}to{transform:translateY(120%)}}
@keyframes bx-sheen{from{transform:translateX(-140%)}to{transform:translateX(760%)}}

.bx-rise{animation:bx-rise 1s cubic-bezier(0.2,0.7,0.2,1) both}
.bx-logo-draw{stroke-dasharray:300;animation:bx-drawmark 2.4s cubic-bezier(0.4,0,0.2,1) both}
.bx-dot{width:6px;height:6px;border-radius:50%;background:oklch(0.84 0.19 145);animation:bx-breathe 3.2s ease-in-out infinite}

/* ---- nav DESK button ---- */
.bx-desk{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;color:oklch(0.84 0.19 145);border:1px solid oklch(0.84 0.19 145 / 0.35);padding:9px 16px;white-space:nowrap;transition:background 0.25s,border-color 0.25s}
.bx-desk:hover{background:oklch(0.84 0.19 145 / 0.1);border-color:oklch(0.84 0.19 145 / 0.7);color:oklch(0.84 0.19 145)}

/* ---- marquee band ---- */
.bx-marquee-band{border-top:1px solid rgba(228,232,225,0.1);border-bottom:1px solid rgba(228,232,225,0.1);overflow:hidden;background:rgba(228,232,225,0.015)}
.bx-marquee{display:flex;width:max-content;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.2em;color:#5F6A5D;padding:14px 0;animation:bx-marquee 42s linear infinite}
.bx-marquee>span{display:flex;gap:44px;padding-right:44px;white-space:nowrap}
.bx-marquee .s{color:oklch(0.84 0.19 145 / 0.5)}

/* ---- tiles: hover top line ---- */
.bx-tile{position:relative;overflow:hidden;transition:background 0.4s ease}
.bx-tile::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:oklch(0.84 0.19 145);transform:scaleX(0);transform-origin:left;transition:transform 0.5s cubic-bezier(0.2,0.7,0.2,1)}
.bx-tile:hover::before{transform:scaleX(1)}
.bx-tile:hover{background:rgba(228,232,225,0.035)}

/* ---- advisory service rail (v2 design) ---- */
.bx-rail{position:relative;max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:72px;padding-left:44px;border-left:1px solid rgba(228,232,225,0.12)}
.bx-svcrow{position:relative;display:grid;grid-template-columns:92px 300px 1fr;gap:32px;padding:46px 0;border-bottom:1px solid rgba(228,232,225,0.08);align-items:baseline;transition:background 0.35s ease}
.bx-svcrow:last-child{border-bottom:0}
.bx-svcrow:hover{background:rgba(228,232,225,0.02)}
.bx-svcrow .num{font-family:'IBM Plex Mono',monospace;font-size:30px;letter-spacing:-0.02em;color:rgba(228,232,225,0.24);transition:color 0.35s ease}
.bx-svcrow .tick{position:absolute;left:-44px;top:54px;width:22px;height:1px;background:rgba(228,232,225,0.28);transition:width 0.35s cubic-bezier(0.2,0.7,0.2,1),background 0.35s ease}
.bx-svcrow:hover .num{color:oklch(0.84 0.19 145)}
.bx-svcrow:hover .tick{width:38px;background:oklch(0.84 0.19 145)}

/* ---- platform CTA (sheen / corner / arrow) ---- */
.bx-cta-solid{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;transition:transform 0.2s ease,box-shadow 0.3s ease}
.bx-cta-solid:hover{transform:translateY(-2px);box-shadow:0 12px 34px -14px oklch(0.84 0.19 145 / 0.7)}
.bx-cta-solid .corner{position:absolute;top:6px;right:6px;width:12px;height:12px;border-top:1px solid rgba(8,10,9,0.45);border-right:1px solid rgba(8,10,9,0.45);transition:width 0.3s cubic-bezier(0.2,0.7,0.2,1),height 0.3s cubic-bezier(0.2,0.7,0.2,1)}
.bx-cta-solid:hover .corner{width:22px;height:22px}
.bx-cta-solid .sheen{position:absolute;top:0;bottom:0;left:0;width:46px;pointer-events:none;transform:translateX(-140%);background:linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent)}
.bx-cta-solid:hover .sheen{animation:bx-sheen 0.85s cubic-bezier(0.3,0,0.2,1) 1}
.bx-cta-solid .arrow{position:relative;transition:transform 0.28s cubic-bezier(0.2,0.7,0.2,1)}
.bx-cta-solid:hover .arrow{transform:translate(4px,-4px)}
.bx-cta-ghost{transition:border-color 0.25s,color 0.25s}
.bx-cta-ghost:hover{border-color:rgba(228,232,225,0.5)!important;color:#E4E8E1!important}

/* ---- footer rule-field fade ---- */
.bx-foot{position:relative;overflow:hidden}
.bx-foot::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg, rgba(228,232,225,0.045) 0 1px, transparent 1px 64px);-webkit-mask-image:linear-gradient(180deg, black, transparent 80%);mask-image:linear-gradient(180deg, black, transparent 80%)}
.bx-foot>*{position:relative}

/* ---- mobile: plates drop to first two layers ---- */
@media (max-width:860px){
  [data-plate] > [data-layer="3"],[data-plate] > [data-layer="4"],[data-plate] > [data-layer="5"]{display:none}
  .bx-rail{padding-left:22px;gap:48px}
  .bx-svcrow{grid-template-columns:40px 1fr;gap:14px 20px;padding:32px 0}
  [data-frame]{padding:32px 22px 30px!important}
  .bx-svcrow p{grid-column:2;max-width:none}
  .bx-svcrow .num{font-size:20px}
  .bx-svcrow .tick{left:-22px;top:34px;width:12px}
  .bx-split{grid-template-columns:1fr!important;gap:34px!important}
}
@media (prefers-reduced-motion:reduce){
  .bx-rulefield,.bx-marquee,.bx-rise,.bx-logo-draw,.bx-dot,[data-layer]{animation:none!important}
  .bx-rise,[class*="bx-rise"]{opacity:1!important;transform:none!important}
}

/* ================= V0 portfolio wall (design: "V0 Wall.dc" 2026-08-30) ================= */
.v0wall{--hair:rgba(228,232,225,0.1);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,minmax(164px,auto));border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.v0cell{position:relative;overflow:hidden;min-height:0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);display:flex;align-items:center;justify-content:center;padding:clamp(8px,1.7vh,18px) 14px;transition:background 0.4s ease,opacity 0.4s ease}
.v0cell:hover{background:rgba(228,232,225,0.032)}
.v0wall:hover .v0cell:not(:hover){opacity:0.34}
.v0lock{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:38px;opacity:0.62;transition:opacity 0.45s ease,transform 0.5s cubic-bezier(0.2,0.7,0.2,1)}
.v0cell:hover .v0lock{opacity:0;transform:translateY(-14px) scale(0.96)}
.v0lock img{display:block;object-fit:contain;max-width:100%}
.v0lock span{font-family:'Archivo',sans-serif;font-stretch:112%;font-weight:600;text-transform:uppercase;font-size:14px;letter-spacing:0.06em;color:#E4E8E1;white-space:nowrap}
.v0rev{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px 16px;opacity:0;transform:translateY(10px);transition:opacity 0.4s ease,transform 0.45s cubic-bezier(0.2,0.7,0.2,1)}
.v0rev>span{min-height:0}
.v0lede{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.v0cell:hover .v0rev{opacity:1;transform:translateY(0)}
.v0brk{position:absolute;width:9px;height:9px;opacity:0;transition:opacity 0.4s ease}
.v0cell:hover .v0brk{opacity:1}
.v0nm{font-family:'Archivo',sans-serif;font-stretch:112%;font-weight:650;font-size:14.5px;letter-spacing:0.01em;line-height:1.15;color:#E4E8E1}
.v0tag{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:0.1em;line-height:1.35;color:oklch(0.84 0.19 145)}
.v0more{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:0.18em;color:#5F6A5D}
@media (max-width:1240px){.v0wall{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(6,minmax(164px,auto))}}
@media (max-width:760px){.v0wall{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(12,minmax(150px,auto))}}
@media (prefers-reduced-motion:reduce){.v0lock,.v0rev,.v0cell,.v0brk{transition:none}}

/* ---- About: V1/V0 timeline rail ---- */
.bx-phase{position:relative;display:grid;grid-template-columns:160px 1fr;gap:40px}
.bx-tdot{position:absolute;left:-50px;top:9px;width:13px;height:13px;border-radius:50%;background:oklch(0.84 0.19 145);box-shadow:0 0 0 5px #080A09, 0 0 22px oklch(0.84 0.19 145 / 0.55)}
.bx-tdot.past{left:-49px;top:10px;width:11px;height:11px;background:#080A09;border:1px solid rgba(228,232,225,0.4);box-shadow:0 0 0 5px #080A09}
.bx-unit .num{font-family:'IBM Plex Mono',monospace;font-size:24px;letter-spacing:-0.02em;color:rgba(228,232,225,0.22);transition:color 0.35s ease}
.bx-unit:hover .num{color:oklch(0.84 0.19 145)}
@media (max-width:1150px){
  .bx-phase{grid-template-columns:1fr;gap:24px}
  .bx-phase>.phaselbl{flex-direction:row!important;align-items:baseline!important;gap:14px!important}
  .bx-units{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}