/* LarkMetric V3.2 interaction and depth layer */

:root{
  --v32-gap:16px;
  --v32-glow-teal:rgba(57,212,178,.16);
  --v32-glow-blue:rgba(123,188,255,.15);
  --v32-panel:rgba(11,27,39,.88);
}

body{
  background:
    radial-gradient(900px 520px at 12% 8%,rgba(57,212,178,.075),transparent 62%),
    radial-gradient(980px 620px at 92% 24%,rgba(85,135,255,.07),transparent 65%),
    linear-gradient(180deg,#061018 0%,#07131c 46%,#061018 100%) !important;
}
.site-shell:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(520px circle at var(--cursor-x,50%) var(--cursor-y,22%),rgba(57,212,178,.035),transparent 65%),
    linear-gradient(180deg,transparent 0%,rgba(255,255,255,.008) 48%,transparent 100%);
}
.ambient-a{opacity:.62!important;filter:blur(22px)!important}
.ambient-b{opacity:.58!important;filter:blur(24px)!important}
.soft-band:before{opacity:1!important;filter:blur(2px)}

.nav-links a.is-active{
  color:#fff!important;
  text-shadow:0 0 18px rgba(57,212,178,.18);
}
.nav-links a.is-active:not(.nav-cta):after{
  right:0!important;
  height:2px!important;
  box-shadow:0 0 14px rgba(57,212,178,.42);
}
.has-scrolled .nav{
  background:rgba(5,14,22,.9)!important;
  box-shadow:0 12px 42px rgba(0,0,0,.18);
}

.breadcrumb-wrap{
  width:min(var(--max,1280px),calc(100% - 56px));
  margin:0 auto;
  padding:24px 0 0;
}
.breadcrumb{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  color:#8299aa;
  font-size:11px;
  letter-spacing:.015em;
}
.breadcrumb a{color:#a9c0cf;transition:color .18s ease,transform .18s ease}
.breadcrumb a:hover,.breadcrumb a:focus-visible{color:#fff;transform:translateY(-1px)}
.breadcrumb-current{color:#dce8ef;font-weight:700}
.breadcrumb-sep{color:#476274}

.trust{
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
  gap:var(--v32-gap)!important;
}
.trust>div{
  border:1px solid var(--line-strong)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(13,30,42,.9),rgba(8,22,32,.92))!important;
  padding:20px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 12px 34px rgba(0,0,0,.11);
}
.trust>div:last-child{border-right:1px solid var(--line-strong)!important}

.flow{gap:9px!important}
.flow-row{
  border:1px solid rgba(121,161,188,.14)!important;
  border-radius:13px!important;
  padding:12px!important;
  background:rgba(6,19,28,.4)!important;
}
.flow-row:first-child{border-top:1px solid rgba(121,161,188,.14)!important}
.flow-row:hover{
  padding-left:14px!important;
  border-color:rgba(123,188,255,.3)!important;
  background:linear-gradient(90deg,rgba(123,188,255,.065),rgba(57,212,178,.025))!important;
}

.process{border:0!important;display:grid!important;gap:12px!important;margin-top:26px!important}
.step{
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(13,29,41,.84),rgba(8,21,30,.88))!important;
  padding:20px!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease!important;
}
.step:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(123,188,255,.29)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.16)!important;
  background:linear-gradient(180deg,rgba(16,35,49,.92),rgba(8,23,33,.94))!important;
}

.v32-interactive{isolation:isolate}
.v32-interactive:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(91,190,255,.075),rgba(57,212,178,.025) 36%,transparent 68%);
  opacity:0;
  transition:opacity .22s ease;
}
.v32-interactive:hover:after{opacity:1}
.card:hover,.decision:hover,.trust>div:hover,.result-box:hover,.notice:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(123,188,255,.34)!important;
  box-shadow:0 22px 55px rgba(0,0,0,.2),0 0 28px rgba(57,212,178,.035)!important;
}
.hero-card:hover{
  border-color:rgba(123,188,255,.34)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.27),0 0 34px rgba(57,212,178,.04)!important;
}

.section-band:nth-of-type(odd):before{
  content:"";
  position:absolute;
  width:min(760px,70vw);
  height:340px;
  right:-9%;
  top:8%;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(123,188,255,.035),transparent 68%);
}
.section-band:nth-of-type(even):before{
  content:"";
  position:absolute;
  width:min(740px,68vw);
  height:320px;
  left:-8%;
  top:14%;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(57,212,178,.035),transparent 68%);
}

.floating-controls{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:70;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.float-action{
  min-width:48px;
  height:48px;
  border:1px solid rgba(121,161,188,.3);
  border-radius:15px;
  background:linear-gradient(180deg,rgba(14,34,48,.94),rgba(7,20,30,.96));
  color:#e8f2f7;
  box-shadow:0 16px 46px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(16px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0 14px;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.float-contact{border-color:rgba(57,212,178,.33);background:linear-gradient(180deg,rgba(17,54,55,.92),rgba(8,31,37,.96))}
.float-action:hover,.float-action:focus-visible{
  transform:translateY(-3px) scale(1.02);
  border-color:rgba(123,188,255,.5);
  box-shadow:0 20px 55px rgba(0,0,0,.34),0 0 28px rgba(57,212,178,.08);
}
.float-icon{font-size:16px;line-height:1}
.float-label{
  max-width:0;
  overflow:hidden;
  opacity:0;
  white-space:nowrap;
  font-size:11px;
  font-weight:800;
  transition:max-width .22s ease,opacity .18s ease,margin-left .22s ease;
}
.float-action:hover .float-label,.float-action:focus-visible .float-label{max-width:90px;opacity:1;margin-left:8px}
.float-top{opacity:0;transform:translateY(8px) scale(.94);pointer-events:none}
.float-top.is-visible{opacity:1;transform:none;pointer-events:auto}

.doc{position:relative;padding-top:34px!important}
.doc .doc-wrap,.doc-wrap{width:min(var(--max,1280px),calc(100% - 56px));margin-inline:auto}
.doc .notice,.doc .card,.result-box{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.grid2,.grid3,.decision-grid,.boundary{gap:20px!important}
.card,.decision,.focus,.contact-form,.result-box,.notice{background-clip:padding-box}

.float-action:focus-visible,.breadcrumb a:focus-visible,.nav-links a:focus-visible{outline:2px solid rgba(123,188,255,.7);outline-offset:3px}

@media(max-width:940px){
  .breadcrumb-wrap{width:min(var(--max,1280px),calc(100% - 32px))}
  .trust{grid-template-columns:1fr 1fr!important}
  .trust>div{border:1px solid var(--line-strong)!important}
}
@media(max-width:620px){
  .breadcrumb-wrap{width:calc(100% - 24px);padding-top:16px}
  .trust{grid-template-columns:1fr!important;gap:10px!important}
  .flow{gap:8px!important}
  .flow-row{padding:11px!important}
  .grid2,.grid3,.decision-grid,.boundary{gap:12px!important}
  .floating-controls{right:12px;bottom:12px}
  .float-action{height:46px;min-width:46px;border-radius:14px;padding:0 13px}
  .float-label{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ambient-a,.ambient-b,.live-pill i{animation:none!important}
  .card,.decision,.step,.trust>div,.flow-row,.float-action,.btn,.nav-links a{transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* V4.8.8 layout rhythm */
.doc .actions{
  margin-top:28px;
  margin-bottom:44px;
}
.doc-wrap > .actions:last-child{
  margin-bottom:48px;
}
.flow-row > .num{
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  text-align:center!important;
  color:var(--blue)!important;
}
@media(max-width:940px){
  .doc .doc-wrap,.doc-wrap{width:min(var(--max,1280px),calc(100% - 32px))}
}
@media(max-width:620px){
  .doc .doc-wrap,.doc-wrap{width:calc(100% - 24px)}
  .doc .actions{margin-bottom:32px}
}
